Bootstrap框架

Bootstrap框架

1. 为什么要学Bootstrap框架

   Bootstrap框架: 为我们提供了用来实现响应式开发的公共资源
   总结: Bootstrap框架用来实现响应式布局
   

2. Bootstrap框架中重点学什么

   Bootstrap框架提供了很多丰富的网页开发资源,代码有上万行代码.1. 重点学习框架中提供的基础样式
   2. 重点学习框架中提供的栅格系统(用来实现响应式布局)
   

3. Bootstrap框架使用

   1. 下载 （bootstrap.css）

      • 生产环境: 该框架代码是经过压缩后的代码,文件的命名是以 .min命名的
      • 源码: 将框架的源代码,没有经过压缩的代码使用
      • Sass: 与less一样,也是用来写CSS代码的另外一种工具

   2. 使用

      • 网页中必须引用bootstrap.css文件或者对应的bootstrap.min.css

        bootstrap.css  : 没有压缩的
        bootstrap.min.css : 压缩过后的文件
        

4. 知识点-Bootstrap-全局样式介绍

   • 排版样式

     1. 用来表示网页标题的可以通过

        到
        表示

     2. 还可以通过 ‘.h1’ - '.h6’表示标题

     3. 在网页中表示副标题通过 标签 或者 ‘.small’

     4. 对齐方式:

        .text-left    左对齐
        .text-center  居中对齐
        .text-right   右对齐
        

     5. 修改字母大小写转化

        .text-lowercase   将字母转为小写字母
        .text-uppercase   将字母转化为大写字母
        .text-capitalize  将首字母转为大写为什么通过设置类名可以实现字母大小写转化?
        本质上就是使用了:  text-transform属性实现的
        

     6. 列表

        .list-unstyled   ----> 去掉列表的默认样式
        .list-inline     ----> 实现列表项一行显示
        

     7. 表格

        .table   ---> 设置表格基础样式
        .table-bordered  ----> 设置带有边框的表格
        .table-hover  --->设置鼠标悬停表格时候的样式
        

   • 图标字体使用

     1. 要引用 bootstrap.css
     2. 直接在标签上使用对应的类名就可以了例如:
     <span class="glyphicon glyphicon-hand-right"></span>
     

5. 知识点-Bootstrap-栅格系统介绍

   • Bootstrap-栅格系统作用

     Bootstrap-栅格系统作用: 就是用来实现响应式布局
     

   • Bootstrap-栅格系统使用

     1. 准备一个父容器,父容器的类名必须叫: 'container'  或 'container-fluid'container: 表示的是当前父容器是一个居中的盒子 (固定宽度)container-fluid : 表示的是父容器是一个通栏的盒子  (100%)2. 通过栅格参数实现响应式布局[必须要记住的].col-md-值 : 当前盒子在PC端所占的比例(份数, 宽度).col-sm-值 : 当前盒子在ipad端所占的比例(份数, 宽度).col-xs-值 : 当前盒子在移动端所占的比例(份数,宽度).col-lg-值:  当前盒子在超大设备中占的比例
     

   • 栅格系统使用

     1. 栅格参数后面的值只能在 1 - 12 之间取值
     2. 不管在什么设备下,栅格系统最多将设备分为12列(12等份)注意:1. 如果栅格参数的值相加大于12,那么多余的元素会自动换行
     

6. 阿里百秀案例-Bootstrap

案例底部结构

1. 放一个整体的一个大盒子

   <div class="footer"><div class="w"><div class="top"></div><div class="middle"></div><div class="bot"></div></div>
   </div>
   

2. 在ip端只要修改版心的宽度为100%

3. 在移动端只需要将版心宽度为100%

   • 在移动端中,先将ul的宽度改大(自定义一个值),目的为了保证li一行显示

   • 由于ul的宽度超出了其父元素的宽度,所以给其父元素设置滚动条

     overflow: scroll |  auto
     

知识总结

1. 行高只能实现单行文字垂直居中

2. 设置鼠标样式

    cursor:  help | pointer | move
   

3. 响应式布局