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 :首字母大寫; . |
(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上屬性讓表格更加緊湊; . |
(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> 按鈕</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)分別標籤滑動前/滑動後觸發的事件;
|