c4rt1y

bootstrap基础知识和常见案列

2019-03-02 bootstrap

0x01 介绍

介绍一些bootstrap基础知识和常见案列

0x02 基础知识

# 容器
## 流体布局容器
容器的width为auto，只是两边加了15px的padding。

## 固定布局
容器的width会随设备分辨率的不同而生产变化

# 分辨率阈值(borderBox)
w >=1200 容器的width为1170 左右padding为15
1200>w >=992 容器的width为970 左右padding为1
992 > w >=768 容器的width为750 左右padding为15
768 > w >=992 容器的width为auto 左右padding为15

# 栅格系统(x默认拥有12个等级)
col-lg-x (>=1120px)
col-md-x (>=992px)
col-sm-x (>=768)
col-xs-x (<768)

# 列偏移
.col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
调整的是margin-left

# 列排序
.col-md-push-* 和 .col-md-pull-* 类的可以设置网格列的顺序，其中 * 范围是从 1 到 11。
push的时候调整的是left，分13个等级（0到12），0时为auto
pull的时候调整的是right，分13个等级（0到12），0时为auto

0x03 使用

# 超大屏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大屏幕</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="jumbotron">
            <h1>请登录</h1>
            <p>超大屏幕</p>
            <button class="btn btn-primary btn-lg">返回</button>
        </div>
    </div>
</body>

</html>

# 导航栏

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- 小屏幕导航按钮和logo -->
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <!-- 三条小横线制作 -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand">网易学院</a>
    </div>
    <!-- 小屏幕导航按钮和logo结束 -->
    <!-- 导航 -->
    <div class="navbar-collapse collapse">
      <!-- navbar-right导航右对齐 -->
      <!-- nav取消ul的默认样式 -->
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#home">首页</a>
        </li>
        <li>
          <a href="#bbs">论坛</a>
        </li>
        <li>
          <a href="#html5">前端开发</a>
        </li>
        <li>
          <a href="#course">最新课程</a>
        </li>
        <li>
          <a href="index.html">移动APP</a>
        </li>
        <li>
          <a href="index.html">联系我们</a>
        </li>
      </ul>

    </div>
    <!-- 导航结束 -->
  </div>
</nav>

# 分页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <ul class="pagination">
      <li>
        <a href="#">&laquo;</a>
      </li>
      <li>
        <a href="#">1</a>
      </li>
      <li>
        <a href="#">2</a>
      </li>
      <li>
        <a href="#">&laquo;</a>
      </li>
  </body>
</html>

# 轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-indicators">
        <ol class="carousel-indicators"></ol>
          <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>
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="item">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="item">
          <img src="img/3.jpg" alt="">
        </div>
      </div>
      <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
      <a href="#myCarousel" class="carousel-control right" data-slide="next">&lsaquo;</a>
    </div>
  </body>
</html>

# 模态框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-indicators">
        <ol class="carousel-indicators"></ol>
          <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>
      <div class="carousel-inner">
        <div class="item active">
          <img src="img/1.jpg" alt="">
        </div>
        <div class="item">
          <img src="img/2.jpg" alt="">
        </div>
        <div class="item">
          <img src="img/3.jpg" alt="">
        </div>
      </div>
      <a href="#myCarousel" class="carousel-control left" data-slide="prev">&lsaquo;</a>
      <a href="#myCarousel" class="carousel-control right" data-slide="next">&lsaquo;</a>
    </div>
  </body>
</html>

0x03 资料来源

https://blog.csdn.net/weixin_42056687/article/details/107701985
GoTop