zoukankan      html  css  js  c++  java
  • fcc 响应式框架Bootstrap 练习1

    需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中:

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

    再把html元素都放到div元素中

     

    <img class="img-responsive" src="/images/running-cat.jpg">

     

    <h2 class="red-text text-center">CatPhotoApp</h2>      text-center不用写样式自动会使h2 居中  

     

    <button class="btn  btn-block btn-primary">Like</button>创建按钮 ,加入btn-block不用写样式,按钮自动成为块级元素,会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行,

    加入btn btn-primary自动变成浅蓝色

     

    Bootstrap 按钮颜色有7种,对应的class为
    btn,白色
    btn btn-primary,深蓝色
    btn btn-info,浅蓝色
    btn btn-success,绿色
    btn btn-warning,黄色
    ,btn btn-danger,红色
    btn btn-inverse黑色
     
     
    <button class="btn btn-block  btn-danger">Delete</button>创建一个文本为 "Delete" 的红色按钮
     

    <div class="row">         三个按钮排成一行
    <div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button> </div> 
    <div class="col-xs-4"> <button class="btn btn-block btn-info">Info</button> </div>
    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button> </div>
    </div>    每个按钮的大小xs较小的,如手机屏,md中等的大小如笔记本电脑,数字代表所占的列宽

    82

     
  • 相关阅读:
    常见字体图标库——font-awesome
    windows server 2012显示桌面图标
    SE 2014年4月14日
    SE 2014年4月13日
    PPP协议总结
    SE 2014年4月12日
    django运行时报错
    linux-python在vim下的自动补全功能
    python发邮件
    背景透明兼容
  • 原文地址:https://www.cnblogs.com/luxiaoli/p/7901155.html
Copyright © 2011-2022 走看看