CNLISIYIII
CNLISIYIII

Bootstrap框架

css框架：对css相同功能的整体封装，方便使用。

常见css框架：Amaze UI；Framework7；Bootstrap

（一）Bootstrap

用于开发响应式布局、移动设备优先的web项目。

1.下载安装

两种版本：1）编译且压缩后的CSS、Js和字体文件，不包含文档和源码；

                  2）less、Js和字体文件的源码，带有文档。

（此处下载了Bootstrap3.3.7版本）

安装：


 

   

   

   

   

   

   

   

   

    Bootstrap 101 Template

   

   

 

 

   

你好，世界！

 

（二）响应式控制类

使用以下类（可单独使用，可结合使用），针对不同屏幕尺寸，隐藏或显示页面内容。


hello

 

hello

前提是一定要引入框架文件bootstrap.min.css或css/bootstrap.css。

（三）栅格系统

栅格系统实现响应式布局，必须在bootstrap框架中。

如果不用栅格系统要实现响应布局，手动写媒体查询代码实现。

使用：必须保证上级元素的类名为：container（固定宽度，根据设备不一样设置一个固定宽度）或 container-fluid（100%宽度，始终要和设备一样宽）。

1）栅格参数的使用：

col-xs-值: 在超小屏幕下占多少列→ 超小屏幕 手机 (<768px)

col-sm-值:  在小屏幕下占多少列(平板)→ 小屏幕 平板 (≥768px)

col-md-值:  在中等屏幕下占多少列→ 中等屏幕 桌面显示器 (≥992px)

col-lg-值:  在大屏幕下占多少列→ 大屏幕 大桌面显示器 (≥1200px)

最多12列。

代码举栗：


       

   

若 li 的类 class="col-md-3" 改成 class="col-md-4" 的话，4个col-md-4超过12列，一行只能显示3个格，第4个会挤到下一行。

栅格系统列的本质就是浮动实现的。

2）清除浮动的使用：


       

     

             

  • li1

    •          

  • li2

    •      

     

   

3）栅格系统的列偏移


     

             

             

  • li1

    •          

  • li2

    •      

   

12列不能被格子整除时，偏移剩余列的一半，就可以居中。

4）嵌套列

  • 我是导航1

                        登录

                        注册

    • 列可以进行嵌套。

    5）列排序

    col-md-push-数字 后推列

    col-md-pull-数字 前推列

    （四）排版标签

    标签：高亮显示

    小号文本标签 或者 .small类名可以实现相同效果

    1）列表

    去掉列表的默认样式: .list-unstyled

     

         

    •  

    列表项在一行上显示: .list-inline

     

           

    •      

    •  

    实现水平的自定义列表: .dl-horizontal

       

       

    2）大小写转换

    .text-lowercase：将字母转为小写

    .text-uppercase：将字母转为大写

    .text-capitalize：首字母大写

    3）表格

    给

    设置

    .table：表格table类

    .table-striped：隔行变色

    .table-bordered：表格边框

    .table-hover：鼠标放上后的样式

    设置表格状态。给

    设置：

    ...

    ...

    ...

    ...

    ...

    4）表单

    基本实例：

    单独的表单空间会被自动赋予一些全局样式。所有设置了 .form-control 类的 、