bootstrap

bootstrap3

栅格系统

    .container　　.container-fluid

      .row

        .col-xs-*    .col-sm-*    .col-md-*    .col-lg-*

        .clearfix      .col-md-offset-*（列偏移）

        .col-md-push-*　　.col-md-pull-*

响应式图片

　　.img-responsive      .img-rounded

　　.img-rounded          .img-circle

快速浮动

　　.pull-left　　.pull-right

元素显示模式类

　　.visible-*-block

　　.visible-*-inline

　　.visible-*-inline-block

表单

　　.form　　.form-group　　.form-control

 

---

bootstrap4  源码

栅格系统

    .container(媒体查询是固定宽度的,padding: 0 15px;)　　.container-fluid(100%)

      .row

        .col-*    .col-sm-*    .col-md-*    .col-lg-*    .col-xl-*    

        .clearfix      .offset-*（列偏移）　　　

        (align-items-start、align-items-center、align-items-end)

        (align-self-start、align-self-center、align-self-end)

        (justify-content-start、justify-content-center、justify-content-end)

        (列断裂:w-20)

以妓会友，评赞走起

---

插件

①.导航条：折叠导航栏 => 需要同版本的bootstrap.js(依赖jquery.js) 和 bootstrap.css 3个文件

//  collapsibleNavbar

<nav class="col-lg-8 navbar navbar-expand-md navbar-dark">
          <a class="webLogo navbar-brand">
            <img class="logoImg" src="./images/logo.jpg" />
            <img class="logoTxt" src="./images/logoText.png" />
          </a>

          <!-- mobile 导航栏按钮 --> 
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li role="presentation" class="nav-item"><a class="nav-link" href="javascript:;">首页</a></li>
                <li role="presentation" class="nav-item"><a class="nav-link" href="patent.html">产品</a></li>
                <li role="presentation" class="nav-item"><a class="nav-link" href="scheme.html">行业解决方案</a></li>
                <li role="presentation" class="nav-item"><a class="nav-link" href="create.html">创新研发</a></li>
                <li role="presentation" class="nav-item"><a class="nav-link" href="serviceSupport.html">服务与支持</a></li>
                <li role="presentation" class="nav-item"><a class="nav-link" href="contactUs.html">联系我们</a></li>
            </ul>
            <div class="nav-right">
              <img src="./images/search_icon.png" alt="" />
              <span></span>
              <img src="./images/scan1.png" alt="">
            </div>
          </div><!-- .nav-block -->
      </nav>

轮播图(v4)

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

　　

分页