BootStrap基本使用

  
    

    
    
    

  注意引入的顺序

BootStrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。

class="h1~h6"
小标题

  
    
    
    
    
  

  
        <%--传统的方式--%>
        标题1
        标题2
        标题3
        标题4
        标题5
        标题6

        <%--BootStrap提供的class样式--%>
        标题1小标题
        标题2
        标题3
        标题4
        标题5
        标题6
  

效果

BootStrap中的P标签
  默认文字大小：14px
  行高：20px
  底部外边距：10px

文本内容的对齐方式  class="text-left"  class="text-center"  class="text-right"

文本大小写转换  class="text-lowercase"  class="text-uppercase"  class="text-capitalize"

文本标记
  使文字底部有黄线
  删除线
  下划线
  加粗加重
  文本缩小显示

  
        
            一袭白袍的陈平安“忘我”出拳，格外行云流水。

            不再是窑工学徒拉坯，处处古板匠气如楷书，已如大家风流之行书。

            其中精髓，唯有吃得住苦、抓得住福而已。
        


        
            一袭白袍的陈平安“忘我”出拳，格外行云流水。

            不再是窑工学徒拉坯，处处古板匠气如楷书，已如大家风流之行书。

            其中精髓，唯有吃得住苦、抓得住福而已。
        


        
            Accept what was and what is, 
            and you’ll have more positive energy to pursue what will be.        

  

效果

  table：默认将表格样式铺满屏幕
  table-striped：斑马线效果
  table-bordered：表格边框
  table-hover：鼠标经过变色
  
行样式
  
  
  
  
  

    

    
    
    

    
        .table {            width: 50%;            margin: 0 auto;            margin-top: 10px;
        }    
    
    
        标题1
        标题2
        标题3
        标题4
        标题5
    
    

    
    
        内容1
        内容2
        内容3
        内容4
        内容5
    

    
        内容1
        内容2
        内容3
        内容4
        内容5
    

    
        内容1
        内容2
        内容3
        内容4
        内容5
    

    
        内容1
        内容2
        内容3
        内容4
        内容5
    

    
        内容1
        内容2
        内容3
        内容4
        内容5
    

    
        内容1
        内容2
        内容3
        内容4
        内容5
    
    

效果

输入框

BootStrap主张将相同组的控件统一放到一个div中方便管理
提供了form-group
    用户名：
    class="form-control input-sm input-lg"
  可以作用在文本域，select
  form-control：输入框会编程圆角，有蓝色选中状态
  input-sm：让输入框变得更大
  input-lg：更小


让表单内容横向显示
：隐藏label

效果

Button
  active：按钮激活
  disabled：按钮禁用
  btn-default：按钮默认样式
  btn-info：信息按钮
  btn-warning：警告按钮
  btn-success：成功按钮
  btn-danger：危险按钮
  btn-link：链接按钮  
测试

效果

    
    width：控制 viewport 的大小，可以指定的一个值，如 600。
也可以指定特殊的值，如 device-width：设备的宽度。
height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次加载的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

当屏幕到达预设宽度时，改变屏幕的显示

1.传统方式
    
    
    
    
    

    
        .test {            width: 300px;            height: 200px;            background: red;
        }


        当屏幕宽度小于900时显示
        @media screen and (max-width: 900px) {            .test {                width: 100%;                height: 100px;                background: blue;
            }
        }    
    2.  BootStrap
    
    
    
    
    

    
        .test {            height: 300px;            background: red;
        }    
    col-lg-3：大屏的时候占三分之一
col-sm-2：小屏的时候占二分之一

BootStrap提供了许多字体图标用以使用
    
        
        Info Button    

    
        
            下拉按钮            
        

        
            

                百度
            
            

                Google
            
        
    data-toggle="dropdown"：用来关联下拉列表

    
        $
        
    

    
        导航1
        
导航2
        
导航3
    

    
        导航1
        
导航2
        
导航3
    

    
        导航1
        
导航2
        
导航3
    ：一般导航样式：胶囊导航样式：垂直导航栏

    
    
    
    
    

    
        body{            margin: 10px;
        }        .progress{            width: 15%;
        }    
    
        
            60%        
    

    
        
            Item1            20
        
        
            Item2            17
        
        
            Item3            15
        
    

  
      
          弹出层      
      
          内容      
      
          脚注      
  

作者：云承寒
链接：https://www.jianshu.com/p/0eba25a1755f