Bootstrap知識點筆記

1.什麼是響應式佈局:網頁會根據瀏覽器設備不同自動改變佈局;

2.響應式網頁必備:

    (1)流式佈局:float:left/right;

    (2)可以改變尺寸圖片/文字大小,如%、auto、em;

    (3)缺點:不適合大型頁面;少用overflow;

3.如何編寫響應式網頁:常用meta設置橫豎屏幕,以及禁止識別電話郵箱<meta  name=”format-detection”content=”telephone=no,email=no”/>;  識別電話郵箱<a href=”tel:110”>撥打110</a>,<a href=”mailto:[email protected]”>發送郵箱</a>;清除頁面自帶的滾動,由內容決定滾動,body,html{height:100%,overflow:hidden},移動端開發時,width值爲百分比,高度爲px具體值;

    (1)聲明viewport視口,<meta name="viewport" content="width=device-width">;

            width=device-width;表示寬度是設備屏幕的寬度;

            initial-scale=1.0;表示初始化縮放比例,與最小縮放比例值一致;

            minimum-scale=1.0;表示最小縮放比較;

            maxiumum-scale=1.0;表示最大縮放比較;

            user-scalable=no;表示用戶是否可以調整縮放比例;

注意:可以在頁面加載前先js獲取設備的寬度,然後確定一個在所有設備下的分辨率即目標設備寬度,來代替(1)的聲明:

(function(){

var w=window.screen.width;  //獲取設備屏幕的寬度

var tarW=320;  //確定一個目標分辨率,即在所有設備下都能是這個寬

var scale=w/tarW;

var meta=document.createElement(‘meta’);

meta.name=”viewport”;

meta.content=’initial-scale=’+scale+’,minimum-scale=’+scale+’,maxiumum-scale=’+scale+’,user-scalable=no’;

document.head.appendChild(meta);

})();

注意:這種方法獲取設備寬度確定一個目標分辨率之後,頁面中元素的寬可以不用百分比了,直接用px取值去以320px的分辨率寬爲設備寬的參考標準;

    (2)使用流式佈局:float:left;

    (3)所有容器/圖片/文字使用相對尺寸:如%,em等;文字大小不能使用px;網頁文字默認大小16px;如可以定義圖片的寬度爲max-width:100%;

    (4)最重要的原則:使用css3 media query;

    (5)aiticle,aside,footer,header,hgroup,nav,section,details,figure變成快級元素block了;

    (6)canvas,audio,video顯示爲行內塊元素inline-block;修改的a的下劃線none;

    (7).container容器是固定寬度並支持響應式佈局,.container-fluid爲類似100%屏幕寬度的容器;.row必須包含在以上2種容器之一中,其直接子元素必須是.col;

    (8)bootstrap:將全局字體默認14px大小,行高1.428;

4.CSS3媒體查詢技術:包括查詢瀏覽網頁的設備(screen(pc/phone/pad),print,tv等),     

設備的類型(尺寸/對比度等);兩種方式:

    (1)執行不同的外部css文件:如<link media="(only)screen and (min-width:776px) and (max-width:991px) href="pad.css"/>;

    (2)根據媒體查詢的結果執行不同的CSS片段:@media screen (min-) and    (max-widht:x)/(orientation:landscape/portrait橫/豎屏){//css樣式};

5.bootstrap全局樣式:

    (1)按鈕:.btn  按鈕的樣式,以下樣式需要在這個樣式基礎上下;         

               .btn-default  白底黑字按鈕;

               .btn-danger/warning/success/info/primary 按鈕的五種顏色;

               .btn-lg/sm/xs  大、中、小按鈕;

               .btn-block   塊級一整行的按鈕;

               .active/disabled  激活/禁用按鈕;

               .btn-group   行內塊;

               .btn-group-vertical     ;

               .btn-toolbar  ;

               .btn-navbar  icon-bar(塊級);

               .btn-inverse     ;

小工具:

               .close   關閉;如<button class="close">X</button>;

               .caret   小三角;如<span class="caret"></span>;

               .pull-left/right  向左/右浮動;

               .center-block     網頁居中;

               .clearfix        清除浮動;

               .show/hidden     顯示/隱藏;

               .invisible        可見;

    (2)圖片:  

               .img-rounded  圓角圖片;

               .img-circle  圓形圖片;

               .img-thumbnail 縮略圖片/鑲邊的效果;

               .img-reponsive 響應式圖片;

               .img-polaroid  ;

    (3)文本:

.text-danger/success/warning/info/primary

.bg- danger/success/warning/info/primary 文本的五種背景顏色;

.text-left/right/center/justify   文本的對齊方式;

.text-uppercase/lowercase   文本轉大寫/小寫;

.text-capitalize     :首字母大寫;

text-overflow        屬性,水平排列的描述列表將會截斷左側太長的短語。在較窄的視口(viewport)內,列表將變爲默認堆疊排列的佈局方式。

    (4)表單:

.checkbox_inline .radio_inline表示將單/複選按鈕由默認的換行顯示改成在一行內顯示;增加了表單元素樣式顯示包括字體,大小,顏色對齊等效果;

.form-inline    爲form添加了屬性表示在屏幕大於768時會顯示在一行,否則就讓裏面的每個元素顯示爲塊級;

.form-horizontal在屏幕大於768時將其表單元素;

.form-group包裹的元素顯示爲行內顯示並且可以使用柵格佈局;

如<div class="form-group has-success/warning/error">  //將其包裹爲一組,     

                                     後面一個屬性表示裏面文本框和文字的樣式;

    <label>用戶名:</label>

    <input type="text" class="from-control"> 增加邊框效果;

</div>

input-sm/lg顯示文本框的小/大;

<span class="help-block"></span>  塊顯示,字體樣式增強;

                .form-actions  :清除浮動;添加樣式;

                .form-search   :

                .form-horizontal   :

 

    (5)屏幕分類:大型屏幕lg(>=1200),桌面通用屏幕md(1200>x>992),平板 sm(991>x>768),手機xs(x<767);

    (6)表格:    

.table   該屬性優化了表格,否則顯示原來的樣式;讓thead增加了下邊框;                     以及增加了上下邊距;以下屬性需要在該屬性下才疊加顯示;

.table-borderd  帶邊框的表格;

.table-striped  隔行變色的表格;

.table-hover   帶懸停表格,背景變成淺灰色;

.table-responsive  響應式表格;父元素上;xs屏幕下回顯示一個滾動條;

        表格的情景樣式,添加在tr、td上:

.table-condensed   :

.active  鼠標經過時變淺灰色;

.success  行/列爲成功色;

.warning  行/列爲警告色;

.danger   行/列爲危險色;

.table-condensed   :table上屬性讓表格更加緊湊;

.overflow-y: hidden   響應式表格使用了 屬性,這樣就能將超出表格底部和頂部的內容截斷。特別是,也可以截斷下拉菜單和其他第三方組件

    (7)柵格系統:

        1佈局的三種方式:table/css+div/bootstrap柵格佈局;

        2柵格系統:          

.container  固定柵格最外層容器;通常960px頁面居中顯示,如果不                           寫就是滿頁面的寬度。                             

.container-fluid       爲流式柵格與不寫一樣滿頁面寬度;

.row        其次,行一個可以允許有多列,前後插入了table清除浮動;

.col         再次,默認一行平分12等份列;

.col-lg/md/sm/xs-1/2..  表示不同屏幕下列的佔比等份及適用性問題;將決定是水平(堆疊)顯示還是換行顯示;當其中一列的內容遠比其他列內容超出顯得格格不如時,需要在這列後額外添加一列.clearfix  .visible-xs/.visible-xs-block;表式可以讓這列與其前面的列顯示一行,其他後面的列換行顯示;列嵌套在列col中在嵌套行和列.

.col-lg/md/sm/xs-offset-1/2..  表示不同屏幕下的列右偏移等份;

.hidden/visible-xs/sm/md/lg     僅在某xs/sm/md/lg屏幕下隱藏/顯示該列格;

.col-lg/md/sm/xs-pull/push-1/2  表示在特定屏幕下pull向左拉幾格/push向右推幾格從而實現列的換位;

列.col裏面的的嵌套行(.row)列(.col);  

    (8)版式:

        1標題:<h#></h#> 或<h#><small>內容</small></h#>  : bootstrap自定義優化了h#,並添加了<small>字體縮小80%;;

        2文本:bootstarp 從重新定位了文本字體的顯示大小和樣式,增加的了.lead屬性表示該文本突出顯示並增加上下邊距,增加了突出文本的字體大小;

        3文本顏色:      

.text-muted   :提示,淺灰色;

.text-primary :主要,藍色;

.text-success :成功,淺綠色;

.text-waring  :警告,淺黃色;

.text-info    :通知,淺藍色;

.text-danger  :危險,淺紅色;

<strong>內容</strong>   :加粗強調內容;

<em>內容</em>            :斜體強調內容;

.hide-text    :隱藏文本; 

<b></b>        :用於高亮顯示文字; 

<del></del>    :效果與<s></s>標籤一樣;

<ins></ins>    :效果與<u></u>標籤一樣;

.text-overflow  :截斷太長的文本內容;

<var>變量</var>  

        4文本對齊:

            .text-left   :文本左對齊;

            .text-center :文本居中對齊;

            .text-right  :文本右對齊; 

        5縮略語:即鼠標經過時彈出完整的信息;

           <abbr title="完整的信息內容">縮寫的信息內容</abbr>

        6地址:<address></address>:bootstrap增強了該屬性,讓字體不在斜體顯示,字體更小了,裏面的a標記自動清除下劃線;

        7引用:<blockqueto></blockqueto>增強了該標籤的字體,邊距和字體顏色等樣式;.blockquero-reverse讓文本右對齊;

        8列表:

            .list-unstyle     :清除了列表樣式的左縮進,以及(list-style:none);

           .list-inline/inline-block      :讓列表的列表項顯示在一行,而不是垂直顯示;

           <dl/dt/dd>     .dl-horizontal   :優化了該標籤,不在縮進顯示;

        9代碼:<code>代碼</code>  :增強了該標籤,讓其紅色顯示;

                 <pre>內容</pre>    :增強了該標籤的顯示文字顏色,以及大小;添加了其嚮應的.pre-scrollable屬性,表示添加了滾動條;

    (9)組件:

            1下拉菜單:可以爲所有對象/導航條/列表添加下拉菜單;

                    <div class="dropdown">    //下拉菜單的必須的最外層包含框

                        <a/button data-toggle="dropdown"/>//第一部分的按鈕/                                 超鏈接單擊時顯示下面菜單;

                        <ul class="dropdown-menu" />//第二部分具體菜單列表;

                    </div> 

//第二部分具體菜單列表;默認隱藏的;需要被第一部分激活;在裏面添加.pull-left/right使其相對於body左/右對齊,其裏面的li添加的.disabled禁用屬性;li不包含內容添加.divider表示爲分割線;li中添加.dropdown-header,標籤將該內容顏色灰色,字體減小實現標題的樣式;

            2按鈕組:

    <div class="btn-group"> //表示將div裏的元素(都有btn屬性)顯示爲按鈕組,

        <p class="btn btn-default">按鈕1(p)</p>

        <li class="btn btn-info">按鈕2(li)</li>

        <a class="btn btn-info">按鈕3(a)</a>

        <span class="btn btn-info">按鈕4(span)</span>

    </div>                 

.btn-group表示將div裏的元素(都有btn屬性)顯示爲按鈕組;

.btn-toolbar將多個.btn-group包裹在一起形成按鈕導航條;

.btn-group默認是水平顯示;按鈕組;data-toggle="buttons";

.btn-group-vertical表示將裏面的按鈕垂直顯示;

.btn-group-justified表示將裏面的按鈕水平兩端對齊;

.btn-group-lg/sm/xs表示按鈕組的大中小號以及默認大寫;

.dropup在添加按鈕組的元素中添加屬性,表示將按鈕向上彈出(默認是向下彈出);

.clearfix:在前後插入table,清除both浮動效果;

data-toggle="button"$().button()/$().button("toggle");激活按鈕;

.btn-link: 按鈕鏈接;<a role="button" class="btn"/> <input/button type="button" class="btn">;

<button><span class="圖標"><span>&nbsp;按鈕</button>:按鈕和圖標;

 

            3導航組件:

.nav定義了導航條;

.nav-pills/nav-tabs定義了指定了導航條的樣式膠囊式/選項卡的樣式;

.pull-right/left相對body左/右對齊;

.nav-jusitified爲兩端對齊;

.nav-stacked表示裏面的按鈕垂直顯示;以及導航組件和下拉菜單的嵌套;

<ul class="nav nav-pills">  

    <li class="active"><a href="#p1">首頁</a></li> //.active表示被激活狀態

    <li><a href="#">導航標題1</a></li>

    <li><a href="#">導航標題2</a></li>

</ul>

激活標籤頁:

<div class="tabbable">  //將導航條和內容放在一個容器裏

    <ul class="nav nav-tabs">  //定義導航條以及膠囊樣式

        <li class="active"><a href="#tab1" data-toggle="tab">首頁  

                       </a></li>  //定義激活按鈕

        <li><a href="#tab2" data-toggle="tab">微客</a></li>

        <li><a href="#tab3" data-toggle="tab">微博</a></li>

    </ul>

    <div class="tab-content">   //定義激活內容

        <div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div>  // tab-pane定義初始隱藏

        <div class="tab-pane fade" id="tab2"><img class="img-responsive" src="images/2.jpg"></div>   

        <div class="tab-pane fade" id="tab3"><img class="img-responsive" src="images/3.jpg"></div>    

    </div>

</div>

data-toggle="tab"或$().tab('show')表示調用tab標籤頁插件

 

            4導航條:;.navbar, 包裹1個/多個導航組件(.nav);

.navbar-default:定義導航條的默認樣式多一個下邊界線;

.navbar-brand:定義導航條裏的元素的爲網址廣告/標題,禁用,字體凸顯的效果;

.navbar-header:定義導航條裏的元素頭部組;

.navbar-nav/link:定義導航條的裏面的導航條組/超鏈接標籤的樣式;

.navbar-right/left:定義導航條裏面的元素的位置;

.navbar-form/btn/text:定義導航條裏面的form標籤/按鈕標籤/文本內容樣式;

.form-group:定義表單from裏面的一個組;

.form-control:定義表單裏面文本框的樣式;

.navbar-fixed-top/bottom:定義了導航條固定在頂/底部;

.navbar-inverse:定義了導航條背景樣式:

.navbar-static-top:定義了導航條左內邊距;

 

            5面板屑:

.breadcrumd:定義了ul/ol裏面的元素水平顯示,'/'分割每個li;

.pagination:定義了ul/ol裏面的元素實現水平分頁按鈕的效果;

.pagination-lg/xs:定義了ul/ol分頁的大小號;默認是中號;

.pager:定義了ul/ol裏面的活動的上一頁和下一頁,可以定義固定在上/下頁位於最左/最右側,通過爲其相應的上下也元素添加.previous/.next;

.label/.label-5種顏色:定義了像標籤一頁的樣式/標籤背景顏色;.badge定義了徽  

                       章樣式和標籤樣式差不多;

 

            6縮微圖:

圖像佔位符:

(1)在線:<img src="http://placehold.it/150x350">;自定義灰色大小佔位區域;

(2)holder.js文件: <img data-src="holder.js/150x350">;

縮微圖:即彈性圖片;

.thumbnails /.thumbnail  :分別定義組/單個的縮微圖,使得圖片響應式,佔父元素的100%寬,且帶內邊框,鼠標懸浮時高亮顯示;

 

            7警告框:

.alert/.alert-5種顏色:表示以下內容爲警告框/及警告框的背景字體顏色;

.alert-dismissable該屬性表示支持兼容各種瀏覽器;

.close: 關閉按鈕的樣式;且a必須href="#";如果是button必須type="button";

.data-dismiss="alert":定義關閉按鈕的關閉的行爲,alert表示關閉當前alert;或在js中$().alert("close")也可定義關警告框行爲;on('close/closen.bs.alert',handder)分別標籤在警告框關閉前/關閉後觸發的事件;

 

.alert-link:在警告框裏的鏈接必須添加該屬性實現跳轉;

 

            8進度條:

.progress:定義父元素的爲整個精度條的外框;

.progress-striped:定義父元素上表示子元素的斑馬條紋顏色;

.active:定義父元素上表示子元素的背景是活動的;

.progress-bar:定義子元素上表示進度,通過style中width=n%;表示其進度;

.progress-bar-5種顏色:定義子元素的背景顏色;

 

            9媒體:

.media:定義在外包含框中,實現圖文混排;也可定義正文的主體內容;

.media-object:定義了裏面的元素爲媒體/圖片對象;

.media-body:定義了裏面元素爲正文部分;

.media-heading:定義了正文的標題;

.media-list:媒體列表,包含多個.media;

.jumbotron:大屏幕區域,帶寬/高灰色背景,常用與凸顯標題或廣告區域;

.page-header:網頁標題區域;

 

            10列表組:

.list-group:優化了ol/ul列表組;

.list-group-item:優化了li列表項字體,行間距;

.list-group-item-heading/text:定義列表標題/內容;

 

            11面板:

.panel: 定義面板組;

.panel-group:摺疊面板組,包含多個面板;

.panel-5種顏色: 定義面板組的顏色;

.panel-heading:定義面板子元素標題;

.panel-body:定義面板子元素正文部分;

.panel-title:定義面板.panel-heading/body/footer子元素的子元素預定義標題;

.panel-footer:定義面板子元素的角部分;

表格/列表嵌套在面板中;.well/.panel都可以作爲容器,且效果相識,但是.well使用範圍比較窄;.well-sm/lg;

           

        12文本框的修飾:

.input-group: 將input和span提示標籤作爲一個組;

.input-group-lg/sm:定義這個組爲大小號;

.input-group-addon:在span中添加這個屬性表示將span的內容與input顯示一行且銜接捆綁在一起;.input-group-btn添加在span中在span裏添加一個按鈕標籤,就可以將按鈕標籤與input捆綁一行了,如果不是添加按鈕標籤,是添加下拉菜單也可組合起來並和input在一行顯示;

.form-control:添加在input中修飾文本框的樣式;

.input-block-level:表示顯示爲block,且border-box;

       

 

        13字體圖標:.glyphicon   .glyphicon-search/等圖標樣式;

       

 

7.BOOSTRAP插件:

    (1)定義模態框:通過a標籤的href="#id"或button的data-target="#id"跳轉到模態對話框,a/button的data-toggle="modal" 定義跳轉的結果是模態對話框;

.modal:定義模態對話框的最外層容器;

.modal-dialog定義是模態對話框;

.modal-content:定義模態對話框的內容;

.modal-header/body/footer:定義模態對話框的頭/主體/角部分;

.data-dismiss="modal":定義關閉當前模態對話框的行爲;

    (2)調用模態對話框:按鈕或a中添加data-toggle="modal" 並通過href或data-

target確定要調用的模態對話框的id;或$elem1.click(function($().modal

(['toggle'/'show/'hidden'])))腳本調用;

    (3)模態對話打開關閉觸發的事件:

    on('show/shown/hide/hidden.bs.modal',handder)分別標籤在模態對話框打開前/打開後/關閉前/關閉後觸發的事件;

    (4)調用下拉菜單:data-toggle="dropdown"或$().dropdown(['toggle']);

    (5)下拉菜單顯示隱藏觸發的事件:

    on('show/shown/hide/hidden.bs.dropdown',handder)分別標籤在下拉菜單顯示前/顯示後/隱藏前/隱藏後觸發的事件;

    (6)滾動監聽:根據滾動的位置自動更新導航條的位置;data-spy="scroll"或$().scrollspy()啓動滾動監聽;data-target="#id"或href="#id"指定滾動的標籤元素;data-offset="30"表示滾動的偏移位置範圍內就會觸發滾動;也可指定爲body裏的滾動監聽;on('activate.bs.scrollspy',handder)表示滾動到某個元素時觸發的事件;

(7)激活標籤頁:

<div class="tabbable">  //將導航條和內容放在一個容器裏

    <ul class="nav nav-tabs">  //定義導航條以及膠囊樣式

        <li class="active"><a href="#tab1" data-toggle="tab">首頁  

                       </a></li>  //定義激活按鈕

        <li><a href="#tab2" data-toggle="tab">微客</a></li>

        <li><a href="#tab3" data-toggle="tab">微博</a></li>

    </ul>

    <div class="tab-content">   //定義激活內容

        <div class="tab-pane active" id="tab1"><img class="img-responsive" src="images/1.jpg"></div>  // tab-pane定義初始隱藏

        <div class="tab-pane fade" id="tab2"><img class="img-responsive" src="images/2.jpg"></div>   

        <div class="tab-pane fade" id="tab3"><img class="img-responsive" src="images/3.jpg"></div>   

    </div>

</div>

data-toggle="tab"或$().tab('show')表示調用tab標籤頁插件;

on('show/shown.bs.dropdown',handder) 分別當前標籤之前一個標籤/當前標籤頁觸發的事件;

    (8)提示工具;即鼠標經過時彈出的提示信息;

        標籤的的title="需要提示的內容",然後    $().mouseover($().tooltip

("show"))即可,爲該標籤添加data-placement="top/right/left/bottom"可以定義顯示的位置;on('show/shown/hide/hidden.bs.tooltip',handder)分別標籤顯示前/顯示後/隱藏前/隱藏後觸發的事件;

    (9)彈出框: <ANY data-placement="top/bottom/left定義彈出框相對ANY元素彈出的位置" title="這裏是彈出框的標題" data-content="這裏是彈出框彈出的正文內容"> ;$("ANY").popover()這是js腳本(不需要click)才能觸發調用彈出框;on('show/shown/hide/hidden.bs.popover',handder) 分別標籤顯示前/顯示後/隱藏前/隱藏後觸發的事件;

    (10)摺疊面板:on('show/shown/hide/hidden.bs.collapse',handder) 分別摺疊面板顯示前/顯示後/隱藏前/隱藏後觸發的事件;通過data-toggle="collapse" 且data-target="#id"或$().collapse(["toggle"])觸發摺疊面的顯示隱藏事件;

    (11)輪播插件:

.carousel :定義輪播插件的外框有三部分組成;

.carousel-indicators:第一部分定義輪播的圖標容器:

.carousel-inner:第二部分定義輪播的項目容器;

.item: 定義輪播項目包含圖片和文字內容;

.carousel-caption:定義項目裏文字的標題,內容部分;

.carousel-control:第三部分定義輪播的控制按鈕;.left/.right定義其在圖片的左邊還是右邊;

data-slide="prev/next":定義了調用輪播向前/後滑動;或通過data-slide-top="0/1/2":定義圖標滑動順序,樣式默認是小圓,調用輪播;或通過$().carousel(["prev/next"]);

on('slide/slid.bs.carousel',handder)分別標籤滑動前/滑動後觸發的事件;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章