Bootstrap學習筆記（三）組件

1、複習總結：全局CSS樣式：

按鈕 .btn .btn-default

圖片 .img-rounded .img-circle .img-thumbnail .img-responsive

文本 .text-五種 .bg-五種 .text-left/right/center/justify

排版和代碼 .list-unstyled .list-inline

表格 .table .table-bordered .table-responsive .table-striped .table-hover

柵格佈局系統

.container .container-fluild

.row

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

.hidden-xs .hidden-sm .hidden-md .hidden-lg

2、列的偏移問題(offset)

.col-xs-offset-1~.col-xs-offset-12 在lg/md/sm/xs屏幕下偏移

.col-sm-offset-1~.col-sm-offset-12 在lg/md/sm屏幕下偏移

.col-md-offset-1~.col-md-offset-12 在lg/md屏幕下偏移

.col-lg-offset-1~.col-lg-offset-12 在lg屏幕下偏移

3、全局CSS樣式——表單——次重點&難點

Bootstrap中的表單分爲三種：

(1)默認表單

<form>

<div class="form-group"> 表單組（增加組之間距離）

<label class="control-label"></label> 控件標籤

<input class="form-control"> 表單控件（漸變背景等等）

<span class="help-block"></span> 幫助塊（字體顏色變淡字體變小）

</div>

</form>

例：<h2>1.默認表單</h2>
<form action="">
  <div class="form-group">
    <label class="control-label" for="uname">用戶名：</label>
    <input class="form-control" id="uname" type="text">
    <span class="help-block">用戶名長度在6~12位之間</span>
  </div>

  <div class="form-group">
    <label class="control-label" for="upwd">密碼：</label>
    <input class="form-control" id="upwd" type="password">
    <span class="help-block">密碼中必須包含數字、字母</span>
  </div>

  
  <div class="checkbox">
    <label>
      <input type="checkbox">我接受本站的使用條款
    </label>
  </div>

  <input class="btn btn-success" type="button" value="提交數據">
  <input class="btn btn-danger" type="button" value="清空重填">
</form>

(2)行內表單

</form>

例：<h2>2.行內表單(inline)</h2>
<form class="form-inline" action="">
  <div class="form-group">
    <label class="control-label" for="uname2">用戶名：</label>
    <input class="form-control" id="uname2" type="text">
  </div>

  <div class="form-group">
    <label class="control-label" for="upwd2">密碼：</label>
    <input class="form-control" id="upwd2" type="password">
  </div>

<input class="btn btn-default" type="button" value="登錄">
</form>

(3)水平表單

使用柵格系統來控制label/input/help-block的寬度

</form>

例：<h2>3.水平表單(horizontal)</h2>
    <h4>水平表單中柵格系統：.form-horizontal > .form-group > .col-* </h4>
   <form class="form-horizontal" action="">
    <div class="form-group">
      <div class="col-md-2">
        <label class="control-label" for="uname3">用戶名：</label>
      </div>
      <div class="col-md-6">
        <input class="form-control" id="uname3" type="text">
      </div>
      <div class="col-md-4">
        <span class="help-block">用戶名長度在6~12位之間</span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-2">
        <label class="control-label" for="upwd3">密碼：</label>
      </div>
      <div class="col-md-6">
        <input class="form-control" id="upwd3" type="password">
      </div>
      <div class="col-md-4">
        <span class="help-block">密碼中必須包含數字、字母</span>
      </div>
    </div>
    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="checkbox">
          <label>
            <input type="checkbox">我接受本站的使用條款
          </label>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <input class="btn btn-success" type="button" value="提交數據">
        <input class="btn btn-danger" type="button" value="清空重填">
      </div>
    </div>
  </form>

第二種：用戶名：與密碼：直接放在label標籤中
  <form class="form-horizontal" action="">
    <div class="form-group">
      <label class="col-md-2 control-label" for="uname4">用戶名：</label>
      <div class="col-md-6">
        <input class="form-control" id="uname4" type="text">
      </div>
      <div class="col-md-4">
        <span class="help-block">用戶名長度在6~12位之間</span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-2 control-label" for="upwd4">密碼：</label>
      <div class="col-md-6">
        <input class="form-control" id="upwd4" type="password">
      </div>
      <div class="col-md-4">
        <span class="help-block">密碼中必須包含數字、字母</span>
      </div>
    </div>
     <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <div class="checkbox">
          <label>
            <input type="checkbox">我接受本站的使用條款
          </label>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-10 col-md-offset-2">
        <input class="btn btn-success" type="button" value="提交數據">
        <input class="btn btn-danger" type="button" value="清空重填">
      </div>
    </div>
  </form>
</div>

效果：

用戶名與密碼的右對齊是源於css中：.form-horizontal .control-label{

padding-top: 7px;
margin-bottom: 0;
text-align: right;

}

4、組件——圖標字體

Glyphicons是一套收費的圖標字體，提供了Web/移動開發中常用的小圖標

Bootstrap中可以免費使用這套字體中的250+個；以服務器端字體形式出現的，即客戶端若訪問了使用Glyphicons字體的網站，會自動從服務器端下載對應的字體文件。

圖標字體實現原理

@font-face { /*設置一個特殊的class*/

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot'); /*設置字體，如果沒有就去URL路徑中去找*/

} /*服務器端字體*/

.glyphicon { /*定義一個class*/

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings'; /*設置一個字體，客戶端沒有這種字體*/

font-style: normal;

font-weight: normal;

line-height: 1;

}

提示：(1)圖標字體的本質不是圖片，而是字體；故凡是可以使用文字的地方都可以使用不同字體，也可以像文字一樣改變顏色

(2)glyphicon圖標字體只能用於“空元素”（不包含任何內容或子元素！）

使用結構如：

刷新按鈕：

</a>

常用的文字圖標

glyphicon-refresh刷新 glyphicon-map-marker定位

glyphicon-backward後退 glyphicon-forward前進

glyphicon-arrow-left後退一頁 glyphicon-arrow-right前進一頁

glyphicon-chevron-left輪播左 glyphicon-chevron-right輪播右

glyphicon-menu-left菜單左 glyphicon-menu-right菜單右

glyphicon-star星號 glyphicon-star-empty空心星號

glyphicon-save保存 glyphicon-save-file保存文件

glyphicon-saved保存完成 glyphicon-floppy-save保存到磁盤

glyphicon-remove刪除 glyphicon-ok確定

glyphicon-home主頁 glyphicon-cog配置

5、組件——按鈕組

.btn-group 水平按鈕組

.btn-group-vertical 豎直按鈕組

.btn-group .btn-group-justified 水平且兩端對齊的按鈕組

.btn-group-lg

.btn-group-sm

.btn-group-xs

6、組件——下拉菜單

下拉菜單必須HTML結構：

<div class="dropdown"> 相對定位的父元素

<a data-toggle="dropdown">觸發元素</a> 觸發元素（用到了jQuery的自定義屬性（data-toggle）與事件觸發(click事件和toggle（）方法）

<ul/div class="dropdown-menu"> 絕對定位

隱藏元素

</ul/div>

</div>

Dropdown

</button>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

</ul></div>

7、組件——導航——小重點

提示：此處的導航不是指導航條！

Bootstrap提供了兩種形式的導航：

(1)標籤頁式導航

</ul>

例：

<ul class="nav nav-tabs nav-justified"> nav-justified佔滿整行

<li><a data-toggle="tab" href="#">十元套餐</a></li> data-toggle="tab"點擊時把別的a的active樣式去掉，給當前的加上

<li><a data-toggle="tab" class="active" href="#">二十元套餐</a></li>

<li><a data-toggle="tab" href="#">三十元套餐</a></li>

</ul>

(2)膠囊式導航

</ul>

例：

<li><a data-toggle="tab" class="active" href="#">二十元套餐</a></li>

<li><a data-toggle="tab" href="#">三十元套餐</a></li>

</ul>

此外，還有兩種導航變種：

(1)兩端對齊的導航 .nav.nav-tabs/pills.nav-justified（兩端對齊導航）

(2)豎直放置的膠囊導航 .nav.nav-pills.nav-stacked（棧式導航）

8、組件：路徑導航(麪包屑)/分頁/標籤/徽章/巨幕/水井/頁頭

麪包屑： .breadcrumb

<li><a href="#">Library</a></li>

</ol>

分頁：

① .pagination

<nav>

</a>

</li>

</a>

</li>

</ul></nav>

② .pager

<nav>

  <ul class="pager">

    <li class="previous"><a href="#"><span >&larr;</span> Older</a></li>

    <li class="next"><a href="#">Newer <span >&rarr;</span></a></li>

  </ul></nav>

標籤： .label

徽章： .badge（可以很醒目的展示新的或未讀的信息條目

）

Messages <span class="badge">4</span></button>

巨幕： .jumbotron （比H1字體還大，用來做廣告）

<h1>Hello, world!</h1>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>

水井： .well(像是在上面往水井裏面看，四周有陰影差別)

頁頭： .page-header（頁頭組件能夠爲 h1 標籤增加適當的空間，並且與頁面的其他部分形成一定的分隔）

<h1>Example page header <small>Subtext for header</small></h1>

</div>

縮略圖： .thumbnail

<h3>Thumbnail label</h3>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div></div>

警告框:

<strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

進度條

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> 動態
    <span class="sr-only">45% Complete</span>
  </div>
</div>

9、組件——響應式導航條——重點&難點

響應式導航條：在PC和平板中默認要顯示所有的內容；但在手機中導航條中默認只顯示“LOGO/Brand”，以及一個“菜單摺疊展開按鈕”，只有單擊摺疊按鈕後才顯示所有的菜單項。

基礎class： .navbar

Bootstrap中導航條的按位置：

頂部導航條
底部導航條

Bootstrap中導航條的按顏色：

淺色底深色的字 .navbar-default
深色底淺色的字 .navbar-inverse

Bootstrap中導航條的按定位：

相對定位position: relative 默認值

固定定位position: fixed .navbar-fixed-top/bottom

導航條的結構：

</div>

</div>

例：

Bootstrap學習筆記（三）組件

Wireshark 安裝+使用（一）

JavaScript複習筆記（一）變量、數據類型和運算符

Bootstrap學習筆記（三）組件

Bootstrap學習筆記（一）入門

BOM學習筆記（一）打開新鏈接四種方式、窗口屬性、定時器

心理學第一週學習筆記：心理學概論

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結