3.23-day7-Bootstrap 底层结构

1.1 版心宽度的挡位划分

  1. 目标

    • 当视口宽度为0~800px时
    • 版心宽度为100%当视口宽度为801~1200px时
    • 版心宽度为700px当视口宽度大于1200px时

    • 版心宽度为1100px

      1. @media screen and (max-width: 800px){
      2. width: 100%;}
      3. @media screen and (min-width: 801px) and (max-width: 1200px)
      4. .w {width:700px;}
      5. @media screen and (min-width: 1201px)
      6. {width: 1100px;}

    • 一套结构，多套样式

      1.    /* 1.公共样式 */
      2.    .box {
      3.        margin: 0 auto;
      4.        height: 100px;
      5.    }
      6.    /* 2.不同屏幕执行的样式 */
      7.    @media(max-width: 800px) {
      8.        .box {
      9.            width: 100%;
      10.            background-color: pink;
      11.        }
      12.    }
      13.    @media(min-width:801px) {
      14.        .box {
      15.            width: 700px;
      16.            background-color: red;
      17.        }
      18.    }
      19.    @media(min-width:1201px) {
      20.        .box {
      21.            width: 1100px; 
      22.            background-color: royalblue;
      23.        }
      24.    }

1.2-多列布局实现思路

  1. * { margin: 0; padding: 0; }
  2.  li { list-style: none; height: 100px; float: left;}
  3.  ul li:nth-child(2n) { background-color: salmon; }
  4.  ul li:nth-child(2n+1) { background-color: red;}
  5. .w {height: 300px;margin: 0 auto; background-color: royalblue;}
  6.  @media (max-width:499px) {.w { width: 100%; }li {width: 100%;} }
  7.  @media (min-width:500px) {.w {width: 480px;}li {width: 50%; }
  8. @media (min-width:1000px) {.w {width: 980px; } li {width: 25%;} }

1.3 BootStrap介绍

  1. Bootstrap是由Twitter 公司开发维护的前端UI框架

  2. ·什么是UI框架?

    • 将常见效果进行统一封装后形成的一套代码（举个例子)

  3. 好处:提高了开发效率

    • 它提供了大量的css样式、html组件、各种各样的特效
    • 提供了一套响应式布局的解决方案——栅格系统

  4. ·版本

    • BootStrap3（目前使用最广泛)
    • BootStrap4

2.1 BootStrap栅格系统–介绍

  1. 是什么?

    • BootStrap把一行分为12等份，一个元素需要占几份就在代码中写几份就行

  2. 使用步骤

    1. 第一步:设置包裹元素

      1. .container或.container-fluid

    2. 第二步:设置行元素

      1. .row

    3. 第三步:设置列元素

      1. .col-lg-数字 -大桌面显示器，大于等于 1200px
      2. .col-md-数字 -桌面显示器，大于等于 992px
      3. .col-sm-数字 -平板，大于等于 768px
      4. .col-xs-数字 -手机，小于 768px

2.2媒体查询

  1. /* 超小屏幕（手机，小于 768px） */
  2. /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
  3. /* 小屏幕（平板，大于等于 768px） */
  4. @media (min-width: @screen-sm-min) { ... }
  5. /* 中等屏幕（桌面显示器，大于等于 992px） */
  6. @media (min-width: @screen-md-min) { ... }
  7. /* 大屏幕（大桌面显示器，大于等于 1200px） */
  8. @media (min-width: @screen-lg-min) { ... }

1-案例

  1. <!-- 版心  有左右内边距15px -->
  2.     <div class="container">
  3.         <!-- row左右的额-15px的外边距，抵消了父元素15px的内边距 -->
  4.         <div class="row">
  5.             <!-- 只是调用了col-lg（md\sm\lg）15px的内边距 -->
  6.             <div class="box1 col-lg-3 col-md-1 col-sm-4 col-xs-2">1</div>
  7.             <div class="box2 col-lg-5 col-md-1 col-sm-4 col-xs-2">2</div>
  8.             <div class="box3 col-lg-4 col-md-1 col-sm-4 col-xs-2">3</div>
  9.         </div>
  10.     </div>
  11.     <!-- <div class="container-flued"></div> -->

2.3-栅格系统列嵌套

  1. <div class="row">
  2.   <div class="col-sm-9">
  3.     Level 1: .col-sm-9
  4.     <div class="row">
  5.       <div class="col-xs-8 col-sm-6">
  6.         Level 2: .col-xs-8 .col-sm-6
  7.       </div>
  8.       <div class="col-xs-4 col-sm-6">
  9.         Level 2: .col-xs-4 .col-sm-6
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

  • 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 | .col-md-3 .col-md-pull-9 | .col-md-9 .col-md-push-3 | | :—-: | :—-: | | | |
  1. <div class="row">
  2.   <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3.   <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>

2.4-排版样式

1.1-对齐

  1. <p class="text-left">Left aligned text.</p>
  2. <p class="text-center">Center aligned text.</p>
  3. <p class="text-right">Right aligned text.</p>
  4. <p class="text-justify">Justified text.</p>
  5. <p class="text-nowrap">No wrap text.</p>

1.2-改变大小写

  1. <p class="text-lowercase">Lowercased text.</p>
  2. <p class="text-uppercase">Uppercased text.</p>
  3. <p class="text-capitalize">Capitalized text.</p>

1.3-缩略语

  1. 实例：
  2. An abbreviation of the word attribute is attr.
  3. <abbr title="attribute">attr</abbr>

3.2 BootStrap全局样式-表格

  1. /
  1. table :基本类名，初始化表格默认样式
  2. table-bordered : 让表格里每个单元格的四周都有边框线
  3. table-striped :隔行变色
  4. table-hover :鼠标悬停效果
  5. table-condensed:让表格上下更紧凑
  6. table-responsive :表格宽溢出滚动
    1. 的class类:
    • .active-鼠标悬停在行或单元格上时所设置的颜色
    • .success-标识成功或积极的动作
    • .info-标识普通的提示信息或动作
    • .warning-标识警告或需要用户注意
    • .danger-标识危险或潜在的带来负面影响的动作

3.3 BootStrap全局样式–表单元素

  1. form-control

    1. ≥给、、
    2. form-inline
    3. 给添加这个类会让里面的所有表单变为行内块，所以会水平排列
    4. 专门设置了获取焦点后的样式

  2. 禁用表单

    1. 添加disabled属性

  3. 只读状态

    1. 添加readonly属性

  4. 设置表单元素的大小:

    1. input-lg
    2. 默认大小i
    3. nput-sm
    4. input-xs