bootstrap最基礎的知識應用

bootstrap最基礎的知識應用（尋找其中需要注意的地方）

我打算通過這個筆記來記錄自己從bootstrap中學到過的東西，這是一個庫，所以存在極大的記憶性，一般來講不需要記，需要用的時候，我們可以直接去查找就是，但是，所有東西都是看起來簡單，但是用起來的時候，才知道其中的磕磕碰碰，所以，自己需要記錄下自己用過了其中的什麼東西。會持續更新。

1.柵格系統

.col-xs-  //當用到這個的時候，任意時候格子都是水平排列的（如果不夠12個格子，給多少用多少）
.col-sm-  //下面這三個用了之後，一旦超越了它們的閾值，就會原來的堆疊變成水平排列，可以利用這個特性設置不同寬度界面的需要
.col-md-
.col-lg-

.visible-col-xs  //這個是指定在這個範圍內，就會出現xs原本該存在的效果，其他情況下都是隱藏的，下面同理
.visible-col-sm
.visible-col-md
.visible-col-lg

.hidden-col-xs  //這個是指定在這個範圍內，就會隱藏xs該存在的效果，其他情況下都是顯示的，下面同理
.hidden-col-sm
.hidden-col-md
.hidden-col-lg

.col-xs-offset-  //一律是向右偏移自己要的位置
.col-sm-offset-
.col-md-offset-
.col-lg-offset-

2.表單

.form-group  //這個用於一行label，另一行是輸入框

.form-control  //這個加在輸入框內，讓輸入框元素寬度爲width: 100%

.form-inline  //<form>內加，一行有所有label和輸入框

.form-horizontal  //<form>內加，一行內有label和輸入框，其他對應的label和輸入框另起一行

其他的一些簡單細節參考官方文檔

3.導航

<ul>
    <li></li>  //一般都是<ul>裏面接<li>
</ul>

4.導航條

（1）區分導航和導航條十分重要；
（2）導航條以<nav>開始，裏面接鏈接調到其他地方
（3）下面是部分代碼

.container  //這個用於居中

.container-fluid  //這個用於讓變得充滿百分之一百

（4）下面是實例的代碼

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">  //這裏是一個頭
      <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>
      <a class="navbar-brand" href="#">Brand</a>  //這裏是一個牌子的圖標，或者說是一個頭的標誌
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

（5）其他細節參考文檔

5. 徽章

.badge

6.面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

7.模態框

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">  //頭部
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  //注意class="close" data-dismiss="modal"
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">  //身部
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">  //腳部
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

8.工具提示

//下面主要看data-toggle="tooltip" data-placement="left" title="Tooltip on left"
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

這個有個要注意的地方是，這個功能不是天生就有的，需要我麼主動用js去激活的：

$('#example').tooltip(options)