介绍4.6

bootstrap 是一套强大的css库，自带响应式栅格系统，组件库，内容样式标签。以下以4.6为例

优点

• 开发范式的改变，不在自己定义class名称，都用他定义好的css来构建。
• 栅格系统可以解决完美适配各种尺寸。
• 现有的参考项目和资料多。

缺点

• 缺点：与现有的项目会有样式冲突，设置rem来控制间距入侵强
• 学习成本高，需要学习很多他们定义的语法
• 很难有更精确的控制，因为都是他设计的一套固定的单位比例 官网地址： Bootstrap v4 中文文档 v4.6

<div class="md-1"></div>

这里的md-1为 margin-bottom:0.25rem

html font-size：16px 默认值

栅格系统

container

• 为了在大尺寸的时候居中显示使用的是max-width
• .container- 后台的单位为了控制哪些尺寸还保留100% 显示。

---

• 不设置为最小。

• 越小则，对应的小尺寸都有个固定的尺寸

• 越大则，默认都是100%，大部分都是 1140px就封顶，5.0以上实际情况则越大还是会自适应继续放大

    学习建议使用container-fluid，这样不会有多余的margin响应row的总宽度
    container一般为最外部容器，可以最外层平行多个。不建议嵌套
  

row

一般row 和 col配套使用

 <div class="row">
    <div class="col-4">1111</div>
    <div class="col-8">22222</div>
  </div>

可以嵌套

<div class="row">
  <div class="col-4">1111</div>
  <div class="col-8">
    <div class="row">
      <div class="col-6">333</div>
      <div class="col-6">444</div>
    </div>
  </div>
</div>

col

bootstrap 是以移动优先为原则。所以直接设置col则就是按所有尺寸都适应

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 

• 越小则，则前面大的都匹配
• 越大则，只满足大的才响应，剩下小于则当作一行处理

col

• 不设置为最小，全部都匹配，并且是弹性填充剩下的空间
• 当小于263的时候会只保留3份
• 当小于197的时候只保留2份

col-

4.6版本没有xs，设置col- 等于xs，

col-md-auto

• 在满足条件的时候才自动填充, 等价于col 自动弹性填充
• 不满足的时候，只按内容撑满

全部堆在一起

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

当满足的540px 的时候每个都变成单独一行，像堆的效果

col-xxx-offset /push /pull

 <div class="container">
    <div class="row">
        <!-- col-md-offset-1向右移动两格 影响后续元素 -->
        <div class="col-md-2 col-lg-offset-2">2</div>
        <div class="col-md-4">4</div>
    </div>
    <div class="row">
        <!-- 向右偏移一格 影响后续元素 -->
        <div class="col-md-2 col-lg-offset-1">md2</div>
        <!-- 向右偏移4格 影响后续元素 -->
        <div class="col-md-1 col-lg-offset-4">md1</div>
    </div>
</div> 

• offset 偏移，其实就是在左侧补列（1~11列）
• push 推，不是补列，而是将元素向左浮动
• pull 拉，将元素向右浮动

pc和移动适配解决方案

<div class="container-fluid">
  <div class="row">
    <div class="col-4 col-md-10">1111</div>
    <div class="col-8 col-md-2">22222</div>
  </div>
</div>

如果做移动端适配，col- 做移动的设置， 只需要设置col-md- 设置为pc的即可，

因为默认col- 全部尺寸匹配， 当满足col-md- 尺寸720 都走pc。

页面内容

bootstrap把css常用的标签都做了二次封装，所以我们需要理解他的规则。

{属性}-{尺寸}-{内容}

display

• .d-inline 为 display:inline
• .d-block 为 display:block
• .d-none 在所有尺寸的屏幕上隐藏
• .d-none .d-sm-block 只在 xs 尺寸的屏幕上隐藏

颜色

color

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

background-color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

border

默认为1px solid

<span class="border-top"></span> 只画顶边
<img src="..." class="rounded" alt="..."> 圆角
<img src="..." class="rounded-circle" alt="..."> 圆形 
颜色
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span> 

flex

.d-flex 
.d-md-flex

.flex-row 
.flex-column
.flex-md-row
.flex-md-column

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
 
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around

.align-items-start
.align-items-end
.align-items-center
.align-items-md-start
.align-items-md-end
.align-items-md-center

.align-self-start
.align-self-end
.align-self-center
.align-self-md-start
.align-self-md-end
.align-self-md-center

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

.flex-nowrap
.flex-wrap

.order-0
.order-1
.order-2
.order-md-0
.order-md-1
.order-md-2

间隔

margin

• my： margin y为top和bottoom
• mx： margin x为left和right

mr-md-3: 为margin-right 当只要宽度大于 767px尺寸，都是 margin-right： 3rem ，注意rem为14px。

<nav class="my-1 my-md-0">

• my-1表示当尺寸小于767px尺寸 ：使用margin： 1rem

• my-md-0表示当尺寸大于767px尺寸 ：使用margin： 0rem

• d-md-none: 表示当尺寸小于767px尺寸 dipaly:none

• md-1: margin-bottom:0.25rem

• md-2: margin-bottom:0.5rem

• md-3: margin-bottom:1rem

• md-4: margin-bottom:1.5rem

n为负数操作 .mt-n1: margin-top:-0.25rem

padding

py： padding y为top和bottoom px： padding x为left和right

字符串

对齐

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>

text-wrap

### 文字大小写 原css ```css p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} ``` ```html

转为小写的文本。

转为大写的文本。

转为首字母大写的文本。

字体加粗

```

其他

float

/*float*/ 
.float-left
.float-right
.float-none 
.float-md-left
.float-md-right
.float-md-none

/*overflow*/ 
.overflow-auto

/*position*/ 
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky

shadow

<div class="shadow-none p-3 mb-5 bg-light rounded">无阴影</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-white rounded">常规阴影</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">大阴影</div>

w- 宽度 h- 高度

<div class="w-25" style="background-color: #eee;">25% 的宽度</div>
<div class="w-50" style="background-color: #eee;">50% 的宽度</div> 
<div class="w-auto" style="background-color: #eee;">Width auto</div>
<img src="..." class="mw-100" alt="...">最大宽度
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
视口
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

垂直居中

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

图标库

bootstrap-icons 需要另外安装使用

组件

collapse

<button data-toggle="collapse" data-target="#demo">折叠</button> 
<div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>



<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>

• .collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

• 控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 

• data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。

• 注意:  <a> 元素上你可以使用 href 属性来代替 data-target 属性:

navbar + collapse

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Expand at md</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample04">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-md-0">
      <input class="form-control" type="text" placeholder="Search">
    </form>
  </div>
</nav>

实际显示内容

<div class="collapse navbar-collapse" id="navbarsExample04"> navbar-collapse是否默认展开 id="navbarsExample04" 用于下面事件触发

触发按钮

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" >

• target指定 触发的ul
• data-toggle 指定开关的变量

fixed navbar

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

轮播carousel

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
          <div class="carousel-caption text-left">
            <h1>Example headline.</h1>
            <p>Some representative placeholder content for the first slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Some representative placeholder content for the second slide of the carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :  " preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>

        <div class="container">
          <div class="carousel-caption text-right">
            <h1>One more for good measure.</h1>
            <p>Some representative placeholder content for the third slide of this carousel.</p>
            <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>

等待转圈

<span class="sr-only">Loading...</span>

设置颜色
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>

其他效果
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

滚动监听

<!-- 可滚动区域 -->
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>
 
<!-- 第一部分内容 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
 
</body>

• 向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。
• 添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
• 注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （<a href="#section1">)。
• 可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
• 设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

按钮

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>

列表组

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div> 



只保留底边
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul> 

添加颜色
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a> 
</div> 
 
 
js控制显示 
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script> 

卡片

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>



<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div> 
 
 
 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

 
 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div> 

瀑布流

card-columns + card

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>