bootstrap

Twitter Bootstrap是一個HTML/CSS/JS框架，適用於移動設備優先的響應式網頁。

V2：面向PC進行了樣式設定，同時兼顧PAD和PHONE

V3：面向Phone進行樣式設定，同時兼顧了PC

主要涉及：

  (1)HTML：爲H5已有的標籤擴展了一些自定義屬性   data-*

  (2)CSS： CSS Reset  + 幾千個class

  (3)JS：基於jQuery提供了十幾個插件函數

內容分爲五部分：

  (1)起步：下載、模板、Bootlint、示例、禁用響應式、

  (2)全局CSS樣式

  (3)組件

  (4)插件

  (5)定製

 

<div id="" class="" style="" title="" data-old-width="500">

 

1.複習：使用Bootstrap頁面模板

2.Bootstrap提供的CSS Reset

  * { box-sizing: border-box; }

  body { font ...; color: #333; background: ...; margin: 0;}

  h1 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h2 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h3 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h4  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  h5  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  h6  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;}

  a { color:;  text-decoration: ;}

  img { border: 0;  vertical-align: middle; }

  p { margin-bottom:10px; }

  ......

 

CSS補充知識點：
盒子模型的計算方法 box-sizing
div {
box-sizing: content-box; /*默認值*/
box-sizing: border-box; /*推薦使用*/
}
content-box: 一個盒子的總寬度=margin+border+padding+width
border-box: 一個盒子的總寬度=margin+width

 

2.Bootstrap全局CSS樣式——按鈕——簡單&有趣

  .btn { padding:;  border: ;}

  .btn-default { color:;  background:;  border-color:;}

----------------------

  .btn-danger

  .btn-success

  .btn-warning

  .btn-info

  .btn-primary

---------------------

  .btn-lg

  .btn-sm

  .btn-xs

----------------------

  .btn-block

----------------------

  .pull-left { float: left; }

  .pull-right { float: right; }

 

 

3.Bootstrap全局CSS樣式——圖片——簡單&有趣

  .img-rounded

  .img-circle

  .img-thumbnail 縮略圖片/拇指圖片

  .img-responsive  響應式圖片

 

 

4.Bootstrap全局CSS樣式——排版和代碼——僅做了解

 .text-danger

 .text-success

 .text.warning

 .text-info

 .text-primary

 .bg-danger

 .bg-success

 .bg-warning

 .bg-info

 .bg-primary

 .text-left

 .text-right

 .text-center

 .text-justify  文本兩端調整對齊

 .text-uppercase  

 .text-lowercase

 .text-capitalize  

 .list-unstyled

 .list-inline    

 

Bootlint工具:

是一個js，由Bootstrap官方提供，用於檢測使用Bootstrap的頁面中常見的HTML錯誤、class使用方面的錯誤——默認狀況下瀏覽器是檢查不出來的。

 

6.Bootstrap全局CSS樣式——表格——簡單&有趣

  .table

  .table-bordered 帶邊框的表格

  .table-responsive 響應式表格  注意：使用在table的父元素上，而不是table上

  .table-striped 隔行變色的表格

  .table-hover 帶懸停效果的表格

 

7.Bootstrap全局CSS樣式——柵格佈局系統——最重點&稍難

 Web開發中頁面佈局能夠採用的方式：

 (1)使用TABLE作佈局

優點：簡單不易出錯  不足：加載效率

 (2)使用DIV+CSS作佈局

優點：加載速度快、靈活  不足：不易控制

 (3)使用Bootstrap提供的柵格(Grid Layout)佈局系統

優點：加載速度快、靈活、支持響應式功能、容易控制（有行/列的概念，但使用DIV+CSS實現）

柵格佈局系統的特色：

 (1)全部的行必須放在容器中： .container或.container-fluid

 (2)分爲多行(row)，一行中平均分爲12列(col)

 (3)網頁內容只能放在列(col)中，不能直接放在行(row)

 (4)能夠在col中再嵌套row

 (5)col分爲四大類： col-xs   col-sm    col-md   col-lg

 (6)col-md-*  *值可爲1~12，值就爲某個列的寬度(  */12  )

 (7)能夠爲一個列指定不一樣屏幕下的不一樣寬度

 (8) col-lg-*  只對大PC屏幕有效

    col-md-*   對普通PC和大PC屏幕都有效

    col-sm-*   對平板、PC、大PC屏幕都有效

    col-xs-*   對手機、平板、PC大PC屏幕都有效

 (9) .hidden-lg    當前列只在大PC屏幕下隱藏

.hidden-md 當前列只在PC屏幕下隱藏

.hidden-sm 當前列只在平板屏幕下隱藏

.hidden-xs 當前列只在手機屏幕下隱藏

 (10) .col-md-offset-1~12——自學

 

 練習：使用柵格系統建立「響應式網頁示例」

 

.container的寬度問題：
當屏幕寬度>1200px（超大PC顯示器-lg）： 容器寬1170px
當屏幕寬度>992px（普通PC顯示器-md）: 容器寬970px
當屏幕寬度>768px（平板顯示器-sm）: 容器寬750px
當屏幕寬度<768px（手機顯示器-xs）: 容器寬auto
.container-fluid的寬度： width: auto; + before + after
面試題：Bootstrap佈局系統中容器的特色？
(1)寬度作了媒體查詢。
(2)添加了前置和後置內容生成，能夠防止子元素的越界、浮動形成的影響。

 

8.補充：CSS相關知識

  (1)如何解決父元素的第一個子元素的margin-top越界問題

1)爲父元素加border-top: 1px;——有反作用

2)爲父元素指定padding-top: 1px;——有反作用

3)爲父元素指定overflow:hidden;——有反作用

4)爲父元素添加前置內容生成——推薦使用

.parent:before {

content: '  ';

display: table;

}

  (2)如何解決全部的子元素浮動後父元素高度變爲0，且影響後續元素

1)爲父元素指定overflow:hidden;——有反作用

2)爲父元素指定高度：height: xxx;——有侷限性

3)爲父元素添加後置內容生成——推薦使用

.parent:after {

content: '  ';

display: table;

clear: both;

}

 

1.全局CSS樣式——柵格佈局系統

  補充：列的偏移問題(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屏幕下偏移

 

 

2.全局CSS樣式——表單——次重點&難點

  Bootstrap中的表單分爲三種：

  (1)默認表單

<form>

<div class="form-group">

<label class="control-label"></label>

<input class="form-control">

<span class="help-block"></span>

</div>

</form> 

(2)行內表單

 

<form class="form-inline">

</form> 

(3)水平表單

 

<form class="form-horizontal">

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

</form>

1.組件——圖標字體——愉快&簡單

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

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

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');

}

.glyphicon {

  position: relative;

  top: 1px;

  display: inline-block;

  font-family: 'Glyphicons Halflings';

  font-style: normal;

  font-weight: normal;

  line-height: 1;

}

提示：(1)圖標字體的本質不是圖片，而是字體；故凡是可使用文字的地方均可以使用不一樣字體

(2)glyphicon圖標字體只能用於「空元素」——不包含任何內容或子元素！如：<span class="glyphicon glyphicon-***"></span>  

 

 

2.組件——按鈕組——簡單

  .btn-group    水平按鈕組

  .btn-group-vertical 豎直按鈕組

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

  .btn-group-lg

  .btn-group-sm

  .btn-group-xs

 

 

3.組件——下拉菜單——小重點&簡單

  下拉菜單必須HTML結構：

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

<a data-toggle="dropdown">觸發元素</a>

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

隱藏元素

</ul/div>    

  </div>

 

 

4.組件——導航——小重點&簡單

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

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

  (1)標籤頁式導航

<ul class="nav nav-tabs">

</ul>

  (2)膠囊式導航

<ul class="nav nav-pills">

</ul>

 

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

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

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

7.組件——自學：路徑導航(麪包屑)/分頁/標籤/徽章/巨幕/水井/頁頭

  麪包屑：  .breadcrumb

 

  分頁：    .pagination        .pager

 

 

  標籤：   .label

 

  徽章： .badge

 

  巨幕：   .jumbotron

 

  水井：   .well

 

  頁頭：  .page-header

 

8.組件——響應式導航條——重點&難點

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

  基礎class： .navbar   

  Bootstrap中導航條的按位置：

1)頂部導航條

2)底部導航條

  Bootstrap中導航條的按顏色：

1)淺色底深色的字 .navbar-default

2)深色底淺色的字 .navbar-inverse

  Bootstrap中導航條的按定位：

1)相對定位position: relative 默認值

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

 

  導航條的結構：

  <div class="navbar 顏色 定位">  

<div class="container">

<!--導航條的頭部：商標+按鈕-->

<div class="navbar-header">

<a class="navbar-brand">

<button class="navbar-toggle">

</div>

<!--導航條摺疊菜單：菜單、按鈕、搜索框、連接、文本...-->

<div class="navbar-collapse">

<ul class="nav navbar-nav">

<form class="navbar-form">

<button class="navbar-btn">

<span class="navbar-text">

<a class="navbar-link navbar-text">

</div>

</div>

  </div>

 

行業小知識：

盲人、智力低下、行動障礙...

H5標籤中有兩類屬性與「無障礙閱讀」相關：

 (1)<ANY  role="">       <b role="button"></b>       VDA

 (2)<ANY  aria-*="">

 

1.插件——概述

  Bootstrap基於jQuery提供了十幾個插件函數（相似於jQueryUI插件庫），每一個插件對應一個.js文件，能夠單獨引用，也能夠總體引用(bootstrap.js)。

  調用上述十幾個插件能夠用兩種格式：

  (1)傳統的JS方式調用：  $(...).dropdown();   $().tab(...);

  (2)使用data-*擴展屬性方式調用：  <a  data-toggle="dropdown">

 

 

2.插件——下拉菜單

  (1)$().dropdown( );

  (2)<a data-toggle="dropdown">

 

 

3.插件——標籤頁(tab)

  (1) $().tab();

  (2) <a data-toggle="tab">

 

 

 

4.插件——Bootstrap提供的彈出框

  (1)工具提示框(tooltip)    data-toggle="tooltip"

  (2)彈出框(popover) data-toggle="popover"

  (3)警告框(alert) —— 小重點

<div class="alert alert-四種顏色 alert-dismissible">

<span class="close" data-dismiss="alert">×</span>

xxxx

</div>

  (4)模態對話框(modal) —— 小重點

模態框定義：在父窗體中彈出一個子窗體，子窗體若不關閉，父窗體就沒法得到焦點，同時父子窗體間還能夠傳遞數據。window.alert()/confirm()/prompt()就是典型例子。模態框必需的結構：

<div class="modal">    <!--半透明的黑色遮罩層-->

  <div class="modal-dialog"> <!--寬/定位-->

    <div class="modal-content"> <!--邊框/背景色/陰影-->

      <div class="modal-header">頭部</div>

      <div class="modal-body">主體</div>

      <div class="modal-footer">尾部</div>

    </div>

  </div>

</div>

顯示一個模態框：

1) <a href="#模態框ID" data-toggle="modal">

2) <button data-toggle="modal" data-target="#模態框ID">

 

 

5.插件——摺疊效果(collapse)

  觸發一個摺疊效果：

1) <a href="#摺疊元素ID" data-toggle="collapse">

2) <button data-toggle="collapse" data-target="#摺疊元素ID">

  ------------------------------------------------------------------------------

  <div id="摺疊元素ID" class="collapse in">

  </div>

 

  摺疊組件的兩個擴展用途：

  (1)Accordion（手風琴）

  (2)響應式導航條在手機屏幕中的效果

 

 

6.插件——輪播廣告(carousel)——小重點

  自己結構較複雜，編寫時只須要記住根class:  .carousel

  <div class="carousel">

<div class="carousel-inner">

<div class="item active">

<img>

</div>

</div>

  </div>

 

 

7.插件——附加導航（Affix）

<div data-spy="affix" data-offset-top="100">

<ul class="nav nav-pills">

</div>

 

 

9.插件——滾動監聽（scrollspy）——瞭解

  隨着頁面內容的滾動，某個導航中的項目，會自動的更改.active位置。

  實現思路：

(1)頁面中必須首先有一個導航菜單(.nav)——其中能夠定義一個菜單項爲.active

(2)導航菜單中的超連接的href屬性值必須和頁面中的某個錨點名同樣

(3)爲頁面添加滾動事件的監聽函數

body.onscroll= function(){

if(body滾動的距離 === 某個錨點距離頂端的距離){

此錨點對應的超連接的父元素li添加.active；

}

}

 

 

做業：

(1)複習Bootstrap提供的全部class   

柵格系統、導航條、表單、媒體對象、面板、表格

(2)概括整理插件函數調用時對應的data-*擴展屬性有哪些

 

1.Bootstrap階段項目

  (1)day01：實現佈局系統和內容

am：完成柵格系統的設計

pm：完成單元格中的內容

  (2)day02：樣式定製

am：less

pm：修改Bootstrap源代碼

 

 

2.補充：柵格佈局系統中列的偏移和排序

  列偏移（offset）： 用途-在不滿的一行中某個列及後續的列向右偏移

col-xs/sm/md/lg-offset-*

提示：某列偏移後，會影響後續的全部列。

 

  列排序（pull/push）：用途-在一行中調整某列的位置，且不影響其餘列

 

 

.col-lg-push-* 在lg屏幕下將列向右推指定的寬度

.col-lg-pull-* 在lg屏幕下將列向左拉指定的寬度

.col-md-push-* 在md/lg屏幕下將列向右推指定的寬度

.col-md-pull-* 在md/lg屏幕下將列向左拉指定的寬度

.col-sm-push-* 在sm/md/lg屏幕下將列向右推指定的寬度

.col-sm-pull-* 在sm/md/lg屏幕下將列向左拉指定的寬度

.col-xs-push-* 在xs/sm/md/lg屏幕下將列向右推指定的寬度

.col-xs-pull-* 在xssm/md/lg屏幕下將列向左拉指定的寬度