web developer bootcamp（三） Bootstrap

发表于 | |

简介及使用

Bootstrap 是最受欢迎的前端框架。CSS 部分包括了各种各样的对类的装饰。使用时可以将 bootstrap 下载下来，将 CSS 文件与 HTML 文件放在同一文件夹下，并在 link 标签中包括这一文件，也可以使用官网提供的线上文件。然后看官网文档，用什么在 HTML 的元素中加入什么类就可以了。这里使用的是 bootstrap v3。

例子 

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Coffee</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="">Sign Up</a></li>
          <li><a href="">Login</a></li>
        </ul>
      </div>
    </nav>

这样就形成了一个 nav bar， 加 container 是为了让 nav bar 中的东西靠中间一些。

  • 要使默认的 nav bar 正常工作，需要在 body 最后加入 bootstrap 的 JavaScript 和 jQuery，虽然现在还不知道这是干嘛的。 
1
2
3
4
5
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  • 在这个 div 中的元素在移动端显示时会隐藏

    1
    2
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    </div>

  • 在 nav bar header 中加入

    1
    2
    3
    4
    5
    6
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

右上角出现一个菜单，data-target 对应的 id 中的东西会在菜单中。

Grid System

网格系统使内容的显示更加美观。

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="col-lg-3 cil-md-3 col-sm-6">TOUR DATA</div>
    <div class="col-lg-3 cil-md-3 col-sm-6">TOUR DATA</div>
    <div class="col-lg-3 cil-md-3 col-sm-6">TOUR DATA</div>
  </div>
</div>

这就组成了一个可随窗口大小变化的网格系统。嵌套的网格需要在 row 中再加一个 row。

其他