Bootstrap作品展示站點實戰(zhàn)項目2
假設(shè)我們已經(jīng)想好了要給自己的作品弄一個在線站點。一如既往，時間緊迫。我們需要快一點，但作品展示效果又必須專業(yè)。當然，站點還得是響應(yīng)式的，能夠在各種設(shè)備上正常瀏覽，因為這是我們向目標客戶推銷時的賣點。這個項目可以利用Bootstrap的很多內(nèi)置特性，同時也將根據(jù)需要對Bootstrap進行一些定制。
1.設(shè)計目標
雖然對大屏幕中的展示效果已經(jīng)胸有成竹，但我們還應(yīng)該從小設(shè)備開始，強迫自己聚焦在關(guān)鍵的要素上面。
這個作品展示站點應(yīng)該具有下列功能：
□ 帶Logo的可折疊的響應(yīng)式導(dǎo)航條；
□ 重點展示四張作品的圖片傳送帶；
□ 單欄布局中包含三塊內(nèi)容，每塊內(nèi)容中都包含標題、短段落和吸引人點擊閱讀的大按鈕；
□ 頁腳包含社交媒體鏈接。
下面的屏幕截圖展示了設(shè)計方案：
總體來看，這將是對我們工作的一個完美的展示。圖片傳送帶比較高，可以充分展示我們作品的圖片。當然，導(dǎo)航到底下的內(nèi)容也不難，用戶可以先了解每一項的大致情況，然后決定深入閱讀那塊內(nèi)容。通過把重要的練級做成大按鈕，從視覺上突出了重要的操作，可以起到吸引用戶點擊的作用，而且就算是手指粗大的用戶都可以輕易點觸。
為了便于維護，我們只考慮兩個主要的斷點。在小于768px的小屏幕中使用單欄布局，否則就切換到一個三欄布局：
在這個針對大屏幕的設(shè)計效果中，可以發(fā)現(xiàn)下列功能：
□ 位于頂部的導(dǎo)航條，而且各導(dǎo)航條都附帶圖標；
□ 寬屏版的圖片傳送帶，其中的圖片拉伸至與瀏覽器窗口同寬；
□ 三欄布局分別容納三塊文本內(nèi)容；
□ 頁腳在布局中水平居中。
這個設(shè)計的配色很簡單，只有灰階以及用于鏈接和突出顯示的金綠色。
明確了設(shè)計目標，接下來就可以布置內(nèi)容了。
2.基本頁面搭建
根據(jù)前面文章【Bootstrap】1.初識Bootstrap的說明，我們可以暫時把項目的基本框架搭建起來。其html文檔代碼如下：
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>作品展示站點</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" /> <!-- Main Style Sheet --> <link rel="stylesheet" href="css/main.css"> <!-- Modernizr --> <script src="js/vendor/modernizr-2.6.2.min.js"></script> <!-- Respond.js for IE 8 or less only --> <!--[if (lt IE 9) & (!IEMobile)]> <script src="js/vendor/respond.min.js"></script> <![endif]--> </head> <body> <!--[if lte IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a >upgrade your browser</a> or <a >activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Bootstrappin'</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container --> </nav> </header> <div role="main"> <img src="img/okwu.jpg" alt="OKWU.edu Homepage"> <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> <img src="img/emancipation.jpg" alt="Emancipation Stories"> <h2>Welcome!</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See our portfolio</a></p> <h2>Recent Updates</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See what's new!</a></p> <h2>Our Team</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">Meet the team!</a></p> </div> <footer role="contentinfo"> <p><a href="index.html"> <img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p> <ul class="social"> <li><a href="#" title="Twitter Profile">Twitter</a></li> <li><a href="#" title="Facebook Page">Facebook</a></li> <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li> <li><a href="#" title="Google+ Profile">Google+</a></li> <li><a href="#" title="GitHub Profile">GitHub</a></li> </ul> </footer> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
打開頁面后，可以看到導(dǎo)航欄后面就是作品圖片：
作品圖片后面就是文本塊和包含一組社交鏈接的頁腳：
倒也簡單。還是開始讓它變身吧！
我們從添加Bootstrap類著手，這樣可以利用Bootstrap默認的CSS樣式和JavaScript行為，迅速搭建起來基本的界面元素。
3.搭建傳送帶
下面先來搭建傳送帶，傳送帶會循環(huán)展示我們作品的四張?zhí)貙憟D片。其標記結(jié)構(gòu)的官方文檔地址是：http://getbootstrap.com/javascript/ 。
可以按照示例中的結(jié)構(gòu)設(shè)置其中的元素。以下代碼就是傳送帶的所有標記，包含各個部分，首先是進度指示器：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol>
整個傳送帶是一個帶ID屬性的div標簽，其 carousel 類用于把Bootstrap 的傳送帶CSS應(yīng)用到這個元素，為指示器、傳送帶項和前一張及后一張控件添加樣式。
進度指示器的 data-target 屬性必須使用傳送帶的 IDcarousel-example-generic 。有了這個屬性，JavaScript 插件才能為活動的傳送帶項添加 active 類。在此我們預(yù)先為第一個指示器添加了active類。然后，類的切換就由JavaScript控制了。它會刪除第一個指示器的這個類，再添加到后續(xù)指示器，如此循環(huán)。
此外，還要注意 data-slide-to 的值從0開始，與JavaScript和其他編程語言一樣。記?。簭?開始，不是從1開始。
指示器后面，是類為 carousel-inner 的元素。這個元素是所有傳送帶項（item），也就是所有圖片。
carousel-inner 元素內(nèi)部是傳送帶項，是一組div標簽，每個都帶有class="item"。把第一項修改成包含item 和active 兩個類，使其一開始就可見。
此時的標記結(jié)構(gòu)如下所示：
<!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/okwu.jpg" alt="OKWU.edu Homepage"> </div> <div class="item"> <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> </div> <div class="item"> <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> </div> <div class="item"> <img src="img/emancipation.jpg" alt="Emancipation Stories"> </div> </div>
傳送帶項之后，還需要添加傳送帶控件，用于在傳送帶左、右兩側(cè)顯示前一個和后一個按鈕。你會發(fā)現(xiàn)其中有類對應(yīng)著 Glyphicon字體圖標。在控件后面，我們在用一個結(jié)束div標簽關(guān)閉整個傳送帶。
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
PS:每個傳送帶控件的href屬性必須是最外圍傳送帶元素的ID值（這里是carousel-example-generic）。
添加以上代碼之后，保存刷新瀏覽器。Bootstrap的樣式和JavaScript都應(yīng)該生效，頁面中的圖片應(yīng)該變身成為滾動的傳送帶?，F(xiàn)在的顯示效果如下：
默認情況下，傳送帶的幻燈片每5秒切換一次。為了充分展示我們的作品，可以改成8秒。
(1) 打開 js/main.js
(2) 添加以下代碼。這里先用jQuery方法檢測相應(yīng)的頁面元素是否存在，如果存在則將傳送帶的間隔初始化為8000毫秒。
$(document).ready(function () {
$(".carousel").carousel({
interval:8000
});
});
(3) 保存并刷新。
相關(guān)的選項可以參考Bootstrap 傳送帶的官方文檔：http://getbootstrap.com/javascript/
4.創(chuàng)建響應(yīng)式分欄
頁面中有三個文本，每塊都有標題、段落和鏈接。在大于平板電腦的屏幕上，我們希望內(nèi)容分為三欄，而在較窄的屏幕上，我們希望內(nèi)容變成一欄全寬。
這里將擁戴Bootstrap 移動優(yōu)先的響應(yīng)式網(wǎng)格，其官方文檔地址為：http://getbootstrap.com/css/（其中文文檔地址為：http://v3.bootcss.com/css/）。
簡單的說，Bootstrap 內(nèi)置12欄網(wǎng)格系統(tǒng)，其基本的類結(jié)構(gòu)支持 col-12 表示全寬，col-6表示半寬，col-4表示四分之一寬，以此類推。
在Bootstrap3 中，由于創(chuàng)造性地使用了媒體查詢，網(wǎng)格體統(tǒng)具有極強的適應(yīng)力。如前所述，我們希望歡迎消息在比平板小的屏幕中呈現(xiàn)一欄全寬，而在大約768px 時變成三分之一欄寬。巧合的是，Bootstrap 內(nèi)置的小屏幕斷點恰好是768px，也就是 @screen-sm-min 變量的默認值。而大于 768px 的中屏幕斷點是992px，對應(yīng)變量是@screen-md-min。然后，大于1200px斷點的算大屏幕。
小斷點有一個特殊的欄類命名法：col-sm-。因為我們向在小斷點之上使用三欄，所以這里使用。這樣在小斷點之下，分塊元素會保持全寬，而在小斷點之上，則會各站三分之一寬并肩排列。完整的結(jié)構(gòu)如下所示：
<div class="container"> <div class="row"> <div class="col-sm-4"> <h2>Welcome!</h2> <p>....</p> <p><a href="#">See our portfolio</a></p> </div> <div class="col-sm-4"> <h2>Recent Updates</h2> <p>....</p> <p><a href="#">See what's new!</a></p> </div> <div class="col-sm-4"> <h2>Our Team</h2> <p>...</p> <p><a href="#">Meet the team!</a></p> </div> </div> </div>
下面稍微解釋下 container 和 row 類的作用：
□ container 類用于約束內(nèi)容的寬度，并使其在頁面內(nèi)居中；
□ row 類用于包裝三個欄，并未欄間流出左右外邊距；
□ container 類和row 類都設(shè)定了清除，因而它們可以包含浮動元素，同時又清除之前的浮動元素。
現(xiàn)在，保存并刷新。可以看到對應(yīng)的顯示效果如下：
這樣就利用響應(yīng)式網(wǎng)格系統(tǒng)完成了響應(yīng)式分欄，接下來我們要利用Bootstrap的按鈕樣式，把內(nèi)容分塊中的鏈接做成突出的效果。
5.把鏈接變成按鈕
把重要的內(nèi)容鏈接轉(zhuǎn)換成突出顯示的按鈕很簡單。為此要用到如下幾個關(guān)鍵的類。
□ btn 類用于把鏈接變成按鈕的樣式；
□ btn-primary 類用于把按鈕變成主品牌顏色；
□ pull-right 類用于把鏈接浮動到右側(cè)，使其占據(jù)更大的空間，從而便于發(fā)現(xiàn)和點擊。
把上述這幾個類添加到三個內(nèi)容塊末尾的鏈接上：
保存并刷新，其顯示效果如下：
此處按鈕的標記結(jié)構(gòu)的官方文檔地址為：http://getbootstrap.com/css/ （中文文檔：http://v3.bootcss.com/css/）。
在基本的標記結(jié)構(gòu)就為的條件下，接下來可以進行微調(diào)了。謂詞需要用到自定義的CSS，而我們要借此機會體驗一下Bootstrap的LESS文件的強大威力。
6.理解LESS
PS:本節(jié)基于bootstrap v3.0.2，這個版本在GitHub上的介紹和下載地址為：https://github.com/twbs/bootstrap/releases/tag/v3.0.2
PS:當前的最新版本是： v4.0.0-alpha.4
本節(jié)會介紹創(chuàng)建創(chuàng)建、編輯、頂置一些LESS文件，以便為我們的設(shè)計生成期望的CSS。
□ LESS 文檔：http://lesscss.org/
□ Sitepoint 網(wǎng)站關(guān)于 LESS 的完整介紹：https://www.sitepoint.com/a-comprehensive-introduction-to-less/
簡而言之，使用LESS預(yù)處理器來生成CSS是一件既令人激動又十分輕松的事。
6.1 嵌套規(guī)則
嵌套規(guī)則極大提高了組合樣式的效率。比如，CSS中的選擇符可能會多次重復(fù)出現(xiàn)：
.navbar-nav {...}
.navbar-nav > li {...}
.navbar-nav > li > a {...}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {...}
其中這些相同的選擇符用LESS寫會簡潔很多，只要使用一個簡單的嵌套即可：
.navbar-nav { ...
> li { ...
> a { ...
&:hover,
&:focus { ... }
}
}
}
編譯后，這些規(guī)則會生成標準的CSS。但 LESS的嵌套規(guī)則更容易寫，也更容易維護。
6.2 變量
使用變量可以讓我們只設(shè)定（或修改）一次，就能自動影響（更新）整個樣式表中用到該值的屬性。比如，可以像下面這樣使用顏色變量：
@off-white: #e5e5e5; @brand-primary: #890000;
在這些變量的值變化后，可以自動將它們更新到整個站點。這是因為我們在LESS文件中使用了這些變量：
a { color:@brand-primary; }
.navbar {
background-color:@brand-primary;
> li > a { color:@off-white;}
}
6.3 混入
混入可以讓生成整套規(guī)則更方便也容易管理。比如，可以利用它簡化為元素應(yīng)用border-box 屬性的任務(wù)。在CSS中，要涵蓋所有瀏覽器，需要用到每種瀏覽器的供應(yīng)商前綴，為此針對每個元素都要寫三行相同的聲明，而且還要記住每一種前綴的寫法：
.box{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
在LESS 中，可以只寫一個供混入的規(guī)則，后面則可以通過 @boxmodel 參數(shù)來指定期望的盒模型：
.box-sizing(@boxmodel){
-webkit-box-sizing:@boxmodel;
-moz-box-sizing:@boxmodel;
box-sizing:@boxmodel;
}
然后就可以在需要的地方使用這個混入了：
.box {
.box-sizing(border-box);
}
.another-element {
.box-sizing(border-box);
}
編譯后，還會為每個元素生成三行CSS 。
6.4 運算式
通過運算式可以基于變量實現(xiàn)數(shù)學(xué)計算。比如，可以將一種顏色作為基準，對其進行加亮和減暗處理：
還可以計算內(nèi)邊距的值，以適應(yīng)導(dǎo)航條的高度。比如，以下Bootstrap 的 navbar.less 文件中的代碼，就將導(dǎo)航項的內(nèi)邊距值設(shè)為導(dǎo)航條高度減去行高之后剩余的高度值。然后，把這個值一分為二，平均應(yīng)用為頂部和底部內(nèi)邊距:
.navbar > li > a {
padding-top：((@navbar-height - @line-height-computed) / 2);
padding-bottom：((@navbar-height - @line-height-computed) / 2);
}
6.5 導(dǎo)入文件
LESS 編譯器支持導(dǎo)入并組合多個文件，最終生成一個統(tǒng)一的CSS文件。我們可以指定導(dǎo)入的次序，按照需要的層疊關(guān)系精確組織結(jié)果樣式表。
Bootstrap 的導(dǎo)入文件 bootstrap.less 一開始導(dǎo)入了基本的變量和混入。然后，又導(dǎo)入了（代替CSS 重置樣式表的） normalize.css 的LESS 版，之后是針對打印媒體的基本樣式（print.css）、基本的全局樣式（scaffolding.less）和排版樣式（type.less）。結(jié)果這個bootstrap.less 文件的開頭幾行就是這樣的：
// Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset @import "normalize.less"; @import "print.less"; // Core CSS @import "scaffolding.less"; @import "type.less";
而最終得到的是一個統(tǒng)一的CSS文件，其中的樣式經(jīng)過從一般到特殊的層疊，正是我們想要的。
6.5 模塊化
把多個文件導(dǎo)入并輸出成一個文件，可以讓我們更方便地組織樣式，對它們進行分組，并在不同的文件中對它們進行維護。這也是Bootstrap會帶有那么多LESS文件的原因，導(dǎo)航條有一個、按鈕有一個、警告框有一個、傳送帶有一個... ，而所有這些都會被導(dǎo)入到 bootstrap.less 文件。
正因為上述原因，LESS及其他 CSS預(yù)編譯器才會變得如此流行。
7.根據(jù)需要定制Bootstrap的LESS文件
在定制Bootstrap的LESS文件期間，我們會發(fā)揮很大的主觀能動性，具體如下：
□ 組織less文件夾，以便靈活、自由地實現(xiàn)我們需要，同時也讓將來的維護者更方便；
□ 自定義Bootstrap提供的幾個LESS文件；
□ 創(chuàng)建幾個新的LESS文件；
□ 為站點整合一套較大的字體圖標，數(shù)量翻倍，并將圖標運用于社交媒體鏈接。
換句話說，我們不光要學(xué)習(xí)Bootstrap的約定，還要發(fā)揮自己的創(chuàng)造力。
為了方便起見，我們把原less文件夾下的less文件，即Bootstrap 的LESS文件移到其文件夾bootstrap 下。
然后再less文件夾下新建 __main.less 文件，此文件是bootstrap.less 的重命名版，它導(dǎo)入了其他所有文件，之后就是通過編譯它基于所有導(dǎo)入的LESS文件生成一個統(tǒng)一的樣式表。不過記得修改其導(dǎo)入文件的路徑：
// Core variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
...
為什么要多此一舉呢？因為我們很快就要創(chuàng)建自己的LESS文件了。這樣一來，我們創(chuàng)建的文件就不會與Bootstrap內(nèi)置的文件混淆，便于調(diào)整。
7.1 自定義變量
按照慣例，我們先復(fù)制一份Bootstrap的變量文件，然后對其進行修改。
(1) 找到less/bootstrap 文件夾中的variables.less 文件，在編輯器中打開它。
(2) 瀏覽一下這個文件，會發(fā)現(xiàn)各種變量，有定義基本顏色值的，有定義頁面背景顏色的，有定義基本顏色值，有定義頁面背景顏色的，有定義字體的，還有定義導(dǎo)航條和背景高度的，等等?？雌饋砗芎?，但改動一下更妙。改動之前，我們先存一個副本，以防將來改壞，好恢復(fù)。
(3) 副本另存為 bootstrap 文件夾外部，在 less 文件夾的 __main.less 文件旁邊。為表示它是自定義文件，命名為_variables.less 。
下面我們就來自定義顏色。
(1) 在新_variables.less 文件的最開始，可以看到 Bootstrap 為灰色和品牌色定義的默認變量及其值。這里的灰色值是基于黑色按比例計算的，使用了 LESS 的 lighten 函數(shù)：
...
@gray-darker: lighten(@gray-base, 13.5%); // #222
...
(2) 我們知道自己想要的值，因此直接替換即可（當然也可以嘗試使用計算的值）。然后再增加兩個變量，以涵蓋我們需要的完整灰度空間。
(3) 代碼如下:
@gray-darker: #222;
@gray-dark: #454545;
@gray: #777;
@gray-light: #aeaeae;
@gray-lighter: #ccc;
@gray-lightest: #ededed;
@off-white: #fafafa;
接下來再修改品牌顏色中的@brand-primary 變量，將其改為金黃色：
要看結(jié)果，需要導(dǎo)入這些新變量并重新編譯生成CSS。
7.2 導(dǎo)入新變量
修改__main.less文件，把原來的"bootstrap/variables.less" 替換成"_variables.less"。然后選中 __main.less 進行編譯，將輸出路徑設(shè)置為 css/main.css 。編譯后，刷新即可看到顯示效果如下：
可以看到鏈接和類為 btn-primary 的按鈕顏色都會發(fā)生變換，因為它們使用的都是變量 @brand-primary 的顏色。
7.3 編輯導(dǎo)航條變量
下面，我們來編輯設(shè)定導(dǎo)航條高度、顏色和懸停效果的變量。
(1) 在_variables.less 中，搜索到下列變量，并修改為下列值。這樣一來，就可以增加導(dǎo)航條的高度、把品牌色應(yīng)用給鏈接，同時利用其他相關(guān)的顏色變量。
@navbar-height: 64px; @navbar-margin-bottom: 0; ... @navbar-default-color: @gray; @navbar-default-bg: #fff; @navbar-default-border: @gray-light; ... // Navbar links @navbar-default-link-color: @navbar-default-color; @navbar-default-link-hover-color: @link-hover-color; @navbar-default-link-hover-bg: @off-white; @navbar-default-link-active-color: @link-hover-color; @navbar-default-link-active-bg: @gray-lightest; @navbar-default-link-disabled-color: @gray-lighter; @navbar-default-link-disabled-bg: transparent; ...
(2) 保存修改、編譯并刷新。其修改前后的顯示效果如下：
可以看到有關(guān)導(dǎo)航條的新特性：
□ 高度增加了14px;
□ 背景變成了白色；
□ 底部邊框稍微變暗了一些；
□ 導(dǎo)航項的背景在懸停時稍暗了一點；
□ 導(dǎo)航項的背景在活動時稍暗一些；
□ 鏈接文本的顏色在懸停時和活動時變成了品牌色。
接下來，我們把Logo放置到位。
8.添加 Logo 圖片
在 img 文件夾里找到 logo.png 文件。你會發(fā)現(xiàn)這個圖片非常大，有900px 寬。在我們最終的設(shè)計中，這個Logo只有120px寬。因為多出來的像素將被壓縮到較小的空間內(nèi)，所以這也是讓圖片在所有設(shè)備（包括視網(wǎng)膜屏設(shè)備）中保持清晰的一種簡便方法。與此同時，這個圖片的尺寸也針對Web進行了優(yōu)化，只有19 KB。
下面就把它放置到位并限制其寬度。
(1) 在html文檔中找到導(dǎo)航條標記中的這一行代碼：
(2) 把其文本 Bootstrap' 替換成 img 標簽，并添加 alt 和 width 屬性。其修改后的代碼為：
(3) 保持后并刷新瀏覽器，可以看到Logo已經(jīng)出現(xiàn)在了相應(yīng)的位置上。
9.調(diào)整導(dǎo)航項內(nèi)邊距
現(xiàn)在，我們來調(diào)整一下導(dǎo)航項，以便文本與Logo位于同一基線之上。
(1) 在 less 文件夾下，新建文件_navbar.less，并把其Bootstrap的navbar.less 文件內(nèi)容拷貝進去。
(2) 在 _navbar.less 中，找到選擇符.navbar-nav，這是導(dǎo)航項的父元素 ul。在相應(yīng)的規(guī)則里，可以看到嵌套的媒體查詢。（關(guān)于媒體查詢，可以參考LESS文檔：http://lesscss.org/）。
(3) 相關(guān)的行如下所示：
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
}
這里的變量@grid-float-breakpoint 指定了一個臨界寬度，大于這個寬度，導(dǎo)航條就會擴展到與屏幕同寬；小于這個寬度，導(dǎo)航條就會折疊起來變成移動應(yīng)用風(fēng)格的響應(yīng)式導(dǎo)航。（這個變量是在_variables.less 中定義的）。
(4) 現(xiàn)在，padding-top 和 padding-bottom 值都是動態(tài)計算的，以確保導(dǎo)航中的文本垂直居中。而我們想增加上內(nèi)邊距，減少下內(nèi)邊距。與此同時，我們還要擴大導(dǎo)航項的間隔，再把字體增大一些。把原來的代碼使用單行注釋，把需要的規(guī)則寫在下面：
> a {
//padding-top:@navbar-padding-vertical;
//padding-bottom: @navbar-padding-vertical;
padding:30px 30px 14px;
font-size:18px;
}
(5) 保存、編譯并刷新瀏覽器，可以看到顯示效果如下：
10.添加圖標
現(xiàn)在輪到為導(dǎo)航項添加圖標了。我們直接使用 Bootstrap 自帶的 Glyphicons，然后嘗試下 Font Awesome 這個大型圖標庫。
PS:此組件的官方文檔地址：http://getbootstrap.com/components/（中文文檔：http://v3.bootcss.com/components/）
我們先從 Home 導(dǎo)航項開始。
(1) 要給 Home 導(dǎo)航項添加 Glyphicons Home 圖標，只要在文本之前添加一個 span 標簽，再加上特定的類即可：
(2) 保存并刷新瀏覽器，可以看到圖標。
(3) 如果沒看到字體，請確保：
□ Glyphicon 字體位于 fonts 文件夾；
□ 變量文件 _variables.less 中的 @icon-font-path 值正確。本例的是@icon-font-path:"../fonts/"：
(4) 接著給剩下的導(dǎo)航項添加對應(yīng)的圖標。以下依此是 Portfolio、Team 和 Contact 的導(dǎo)航項代碼：
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Portfolio</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Team</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
(5) 保存并刷新，可以看到效果：
(6) 對應(yīng)的折疊后的響應(yīng)式效果：
還不錯。
不過，這里的圖標與設(shè)計方案中的并不完全一致。設(shè)計方案中的是這樣的：
Bootstrap 中免費使用的 Glyphicons 不包含計算器顯示器和群組圖標。此外，我們也沒有從 Glyphicons 圖標中找到適合頁腳中社交媒體鏈接的圖標。
好在，我們還有別的選擇。
11.添加 Font Awesome 圖標
目前，F(xiàn)ont Awesome 中包含364個圖標，是 Glyphicons 的 Bootstrap 版本的進兩倍。 Font Awesome 圖標是免費、開源的，而且也很方便在 Bootstrap 中使用。其主頁地址為：http://fontawesome.io/
下面我們就來使用Font Awesome 圖標。
(1) 打開Font Awesome的主頁，找到下載地址。當然進入其Github鏈接下載代碼：https://github.com/FortAwesome/Font-Awesome
(2) 解壓縮下載到的文件，然后把其font 文件夾下的所有字體文件復(fù)制到我們的 font 文件夾下。
(3) 然后把其 less 文件夾下的所有文件輔助到我們的 less 文件夾下新建的 font-awesome文件夾下。
(4) 接著，在 __main.less 文件中導(dǎo)入 font-awesome.less 文件，以便文件規(guī)則編譯到樣式表中。
@import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
(5) Font Awesome 的 less 文件中的包含一個變量，指定了 Font Awesome 字體的路徑。我們要確保該路徑與項目文件夾結(jié)構(gòu)一致。打開 Font Awesome 變量文件
font-awesome/variables.less ，確保@fa-font-path 變量的值是：../fonts；如下所示：
PS: 這里的路徑是相對于編譯得到的CSS文件而言的，它位于 css 文件夾中。
(6) 保存并編譯 CSS。然后更新 Team 導(dǎo)航項的代碼。
(7) 保存并刷新瀏覽器，可以看到結(jié)果：
PS:如果你看到的是一個奇怪的符號，或者什么都沒有看到，那說明 Web 字體并沒有應(yīng)用。這時，要檢查圖標類是否正確（包括 fa 類），確保 Font Awesome 字體都在 fonts 文件夾中，而且 font-awesome/variables.less 中的路徑也沒有問題。
此刻，我們可以同時使用 Glyphicons ，也可以完全棄用它。為了減少代碼冗余，咱們還是棄用它，只使用 Font Awesome字體。為此只需要兩步：
(1) 把 __main.less 中導(dǎo)入 Glyphicons 字體的代碼注釋掉。
(2) 然后把 html文檔中的圖標標記的類，改為 Font Awesome 圖標對應(yīng)的類名。
查看 Font Awesome 圖標的頁面http://fontawesome.io/icons/，可以看到圖標對應(yīng)的類名。修改對應(yīng)的導(dǎo)航項代碼如下：
<li class="active"><a href="index.html"><span class="icon fa fa-home"></span> Home</a></li> <li><a href="#"><span class="icon fa fa-desktop"></span> Portfolio</a></li> <li><a href="#"><span class="icon fa fa-group"></span> Team</a></li> <li><a href="#"><span class="icon fa fa-envelope"></span> Contact</a></li>
顯示效果如下：
12.調(diào)整傳送帶
關(guān)于傳送帶，我們主要還是使用 Bootstrap 默認的樣式，同時對幾個比較重要的地方進行定制。為此，和前面一樣，我們復(fù)制一份 Bootstrap 的carousel.less 文件到less文件夾下，重命名為 _carousel.less，然后在 __main.less 更新其導(dǎo)入信息。下面我們就可以開始定制了。
12.1 把控件改成使用 Font Awesome 圖標
如果你在前面就把 Glyphicons 字體刪除了，那就會發(fā)現(xiàn)傳送帶左右兩側(cè)的“上一個”和“下一個”控件不見了。因為這兩個圖標就來自 Glyphicons 。我們可以讓 Font Awesome 圖標取而代之。
(1) 首先，更新 html 文檔中的圖標標記。找到帶有 carousel-control 和 left、right 類的鏈接。
(2) 將 span 標簽中的類修改為通用的 icon 類，再加上Font Awesome 圖標類，如下所示：
<span class="icon fa fa-chevron-left"></span>
...
<span class="icon fa fa-chevron-right"></span>
(3) 接下來，在 _carousel.less 中添加新類選擇符。先找到注釋// Toggles ，然后添加我們的 .icon 類和注釋：
// Toggles
.icon-prev,
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right,
.icon { //added
...
}
.icon-prev,
.glyphicon-chevron-left,
&.left .icon { //added
left: 20%; //edited was 50%
}
.icon-next,
.glyphicon-chevron-right,
&.right .icon {//added
right: 20%;//edited was 50%
}
關(guān)于以上修改說明如下：
□通過添加基本的icon類，我們可以使用任意圖標，樣式都不會出問題；
□&.left 和 &.right 的寫法是在嵌套層次中回溯一層，編譯之后分別是 .carousel-control .left 和 .carousel-control .right；
□修改left: 和 right: 定位的值之后，讓圖標更靠近傳送帶兩側(cè)的邊界。
保存，編輯，刷新。新的 Font Awesome 圖標應(yīng)該粉墨登場了。
下面，我們對傳送帶進行一番修飾。
12.2 添加上、下內(nèi)邊距
先給.carousel 元素添加一點上、下內(nèi)邊距，并將背景色設(shè)置為 @gray-lighter。
.carousel {
position: relative;
padding-top:4px; //added
padding-bottom:28px;//added
background-color:@gray-lighter; //added
}
保存編譯后，透過新添加的內(nèi)邊距，可以看到傳送帶中圖片上、下方的亮灰色背景。這樣就似乎有了一個框，將圖片與其上、下的元素隔離開來。
此外，我們還要利用多出來的下邊距重新定位傳送帶指示器，讓它更顯眼一些。
不過，我們得先讓圖片在所有情況下都能自動拉伸填充所有空間。
12.3 強制圖片全寬
無論屏幕多寬，我們都想讓圖片保持與屏幕同寬。因為傳送帶中的圖片寬度為1600px，基本可以涵蓋大多數(shù)屏幕。如果屏幕寬度超過1600px，那右側(cè)就會出現(xiàn)間隙。
強制讓圖片在1600px 以上的屏幕中也保持全寬，可能導(dǎo)致輕微的像素失真；但如果圖片足夠大，變形也不至于太明顯。
PS:如果時間允許，我們可以采用響應(yīng)式圖片方案，即在小屏幕上加載小圖片，給大屏幕使用大圖片。
現(xiàn)在我們只要在文件中新增兩行代碼即可：
.carousel-inner { ...
> .item { ...
> img,
> a > img {
&:extend(.img-responsive);
line-height: 1;
min-width:100%; //added
}
做出這個調(diào)整后，無論把瀏覽器窗口拉的多寬，圖片都會跟著變寬。
接下來，需要限定傳送帶的最大高度。
12.4 約束傳送帶的最大高度
我們發(fā)現(xiàn)，在中大型屏幕中，傳送帶變得太高了。根據(jù)設(shè)計方案，傳送帶的高度應(yīng)該大致在440px。簡單，我們只要在圖片的父元素 .carousel-inner > .item 上添加這個限制即可：
.carousel-inner { ...
> .item {
...
max-height:640px; //added
因為 .carousel-inner 元素有一條規(guī)則是 overflow:hidden，而 .item 元素又被限定了高度，所以圖片高度超過最高限制后，其下面的部分會被隱藏起來。
在這一步的基礎(chǔ)上，我們可以繼續(xù)使用嵌套媒體查詢（LESS 的另一個方便特性），再利用 Bootstrap 的中、大斷點變量，分別調(diào)整一下屏幕寬度過寬時圖片的垂直定位，從而保證我們的作品處于焦點位置。為此要用到以下代碼：
// Account for jankitude on images
> img,
> a > img { ...
// adding media queries to position images
@media (min-width:@screen-md-min){
margin-top:-40px;
}
@media (min-width:@screen-lg-min){
margin-top:-60px;
}
保存、編譯并刷新。你會發(fā)現(xiàn)這時候的傳送帶已經(jīng)基本形成，無論寬屏還是窄屏，都有模有樣了。
12.5 重定位指示器
傳送帶指示器的作用是向用戶顯示一共有幾張幻燈片，當前幻燈片是第幾張?，F(xiàn)在，指示器不是很明顯。下面我們把指示器放到它應(yīng)該在的位置上：圖片下方。
(1) 在_carousel.less 中，搜索到注釋 // Optional indicator pips，看看這個元素垂直方向的定位距離：
.carousel-indicators {
position: absolute;
bottom: 10px;
...
(2) 我們打算把它們挪到幾乎靠近底邊的位置，進入前面添加內(nèi)邊距制造出來的陰影區(qū)。調(diào)整底部定位的值可以做到。此外，還需要同時把下外邊距重置為0。
.carousel-indicators {
position: absolute;
bottom: 0; //edited
margin-bottom:0; //added
...
(3) 找到文件末尾的代碼，在針對平板及以上屏幕的代碼處：
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
這是把指示器向上調(diào)的，現(xiàn)在我們用不著了。只需要把它注釋掉，就不會被編譯到CSS中了。
//.carousel-indicators {
// bottom: 20px;
//}
這樣就達到我們目的了?，F(xiàn)在，指示器在各種屏幕上的位置都始終如一了。
接下來，我們調(diào)整指示器的外觀，讓它們更大，更顯眼一些。
12.6 調(diào)整指示器外觀
我們要使用灰色相關(guān)的變量，把傳送帶指示器調(diào)整得更顯眼一些。除了調(diào)整顏色，也要把它們調(diào)大點。先從 _variables.less 文件開始：
(1) 在 variables.less 中，可以找到以下兩個變量。這兩個顏色用于默認狀態(tài)下指示器的邊框，還有活動狀態(tài)下指示器的填充。
@carousel-indicator-active-bg: #fff; @carousel-indicator-border-color: #fff;
(2) 修改代碼后，如下：
[@carousel-indicator-bg: @gray-light; //新增默認的背景色,作為默認狀態(tài)下指示器的填充色 @carousel-indicator-active-bg: @gray-lightest; //活動狀態(tài)下的背景色 @carousel-indicator-border-color: transparent; //設(shè)置為透明
(3) 保存、編譯并刷新。
至此，除了讓活動狀態(tài)下的指示器不可見，其他樣式都就緒了。
下面再打開_carousel.less 。
(1) 找到下面的規(guī)則：
.carousel-indicators {
position: absolute;
...
(2) 找到嵌套其中的 li 選擇符。在這里需要修改幾個值:
□ 把 width 和 height 增大到 18px；
□ 刪除外邊距
□ 添加background-color 聲明，值設(shè)置為新變量 @carousel-indicator-bg；
□ 刪除邊框線（前面把邊框變量設(shè)置為透明，就是為了這里安全）；
□ 為所有修改和新增添加注釋，如下所示：
li {
display: inline-block;
width: 18px; //edited
height: 18px; //edited
//margin: 1px; //edited
text-indent: -999px;
background-color:@carousel-indicator-bg; //added
//border: 1px solid @carousel-indicator-border-color; //edited
border-radius: 10px;
(3) 注意下面這兩個針對IE8-9 的手法，它們在這兩個瀏覽器中為指示器提供背景顏色。因為我們已經(jīng)給所有指示器都提供了背景色，所以這幾行就沒有必要了。這里把它們都注釋掉，以免干擾前面聲明的背景色。
//background-color: #000 \9; // IE8
//background-color: rgba(0,0,0,0); // IE9
(4) 接下來，再注釋掉 .active 選擇符下面的 margin、width、height，因為我們不希望活動狀態(tài)下的指示器變小，如下圖所示：
修改后的代碼如下：
.active {
//margin: 0; //edited
//width: 12px; //edited
//height: 12px; //edited
background-color: @carousel-indicator-active-bg;
}
(5) 最后，與 .active 選擇符并列添加一個 :hover 選擇符，增加懸停效果：
(6) 保存，并編譯，可以看到顯示效果如下：
這樣，傳送帶的調(diào)整工作就做完了。
13.調(diào)整分欄及其內(nèi)容
下面我們來調(diào)整下位于標題 Welcome!、Recent Updates、Our Team 下面的三個內(nèi)容塊。
首先，為每個塊中的按鈕添加圓圈箭頭圖標。這里還是使用 Font Awesome 圖標。
(1) 查看其文檔：http://fontawesome.io/icons/
(2) 找到想要使用的圖標：
(3) 在 html文檔中，為每個鏈接添加帶有適當類的 span 標簽。下面是第一個鏈接添加代碼后的結(jié)果：
<a href="#" class="btn btn-primary pull-right">See our portfolio <span class="icon fa fa-arrow-circle-right"></span> </a>
(4) 每個鏈接都如此。這樣，每個按鈕上就都有了相同的圖標了。
再給文本塊與傳送帶直接增加一些垂直內(nèi)邊距，現(xiàn)在太緊了。
(1) 在 less 文件夾下新建文件_page-content.less，用以保存這些修改及其他改動。
//
//Page Contents
// ----------------------------
.page-contents {
padding-top:20px; //上邊距
padding-bottom:40px; //下邊距
}
(2) 在 __main.less 文件中導(dǎo)入該文件：
//Other custom files
@import "_page-content.less";
(3) 下面再在標記中添加必要的類。打開html文檔，給帶有 container 類的 div 元素添加 page-contents 類，就在傳送帶的結(jié)束標簽處。
<div class="container page-contents"> <div class="row">
接下來，我們再對窄屏幕下這些塊的效果進行調(diào)整。如下圖所示，在一欄布局時，標題并沒有清除相鄰的按鈕。
※本書上有說如果只是給每個包含塊 div 添加一個 clearfix 類，用以清除浮動是不行的。因為在視口 768px 以上寬度時，需要讓這些快都浮動起來，誰也不能清除誰。但是，筆者在測試的時候發(fā)現(xiàn)是可以實現(xiàn)同樣效果的。（估計是版本不同的問題，筆者這里是當前最新的正式版本 v3.3.7）這是因為 CSS 存在：
但不存在：
如果存在的話，就會造成視口 768px 以上寬度時，還是一欄顯示：
所以，實際情況，這里只需要在每個包含塊 div 添加一個 clearfix 類就可以了。
保存，編譯，刷新瀏覽器后顯示效果如下：
下面該來修飾頁腳了。
14.修飾頁腳
頁腳最主要的功能是羅列社交圖標。就用 Font Awesome ！
查詢 Font Awesome 文檔，可以在 Brand Icons 部分找到我們想要的圖標：http://fontawesome.io/icons/#brand
那么，只要把頁腳中的社交鏈接替換成帶有相應(yīng)類的 span 元素即可。
<ul class="social"> <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li> <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li> <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li> <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li> <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li> </ul>
替換之后的標記讓原來的社交鏈接變成了圖標鏈接：
為了讓這些圖標水平居中，執(zhí)行下路操作：
(1) 創(chuàng)建一個新的文件 less/_foot.less 來保存相關(guān)樣式。
(2) 在 __main.less 導(dǎo)入這個文件
(3) 調(diào)整頁腳的樣式如下：
ul.social {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
> li {
display: inline-block;
font-size:18px;
line-height:30px;
.square(30px); //see bootstrap/mixins.less
border-radius:36px;
background-color:@gray-light;
margin: 0 3px 3px 0;
> a {
color:#fff;
}
&:hover {
text-decoration: none;
background-color: @link-hover-color;
}
}
}
□ 去掉 ul 中默認的內(nèi)、外邊距；
□ 將容器寬度拉伸到百分之百；
□ 內(nèi)容居中；
□ 列表項顯示為行內(nèi)塊，因此可以像文本一樣居中；
□ 鏈接也顯示為行內(nèi)塊，從而可以填滿有效空間；
□ 增大字號和行高；
□ 使用 Bootstrap 的混入，將寬度和高度設(shè)計為 30px 見方；
□ 要查看這個混入，打開 bootstrap/mixins/size.less ，搜到 .square，可以看到下列代碼：
□ border-radius 屬性的值設(shè)置得足夠大，以便圖標及其背景呈現(xiàn)圓形；
□ 設(shè)置背景色、前景色和外邊距；
□ 去掉懸停狀態(tài)默認出來的下劃線，同時把背景色改為淺灰色。
設(shè)置以上樣式后，我們再給頁腳添加一些上、下內(nèi)邊距，然后將內(nèi)容居中，以便 Logo 居中顯示在社交圖標上。
footer[role="contentinfo"] {
padding-top: 24px;
padding-bottom: 36px;
text-align: center;
}
結(jié)果，如下所示：
15.接下來做什么
在實際做一個類似的項目之前，本身的作者強烈建議大家至少再做一件事。那就是花點時間優(yōu)化你的圖片、CSS 和 JavaScript。這些優(yōu)化并不難。
□ 壓縮圖片花不了多少時間，但卻能解決導(dǎo)致圖片臃腫的最大問題。此章的圖片都在 Photoshop 中使用了 “保存為 Web 格式”，但或許你還是能夠再把它們壓縮一些。
□ 此外，應(yīng)該馬上從 __main.less 中刪除那些不需要的 Bootstrap 的 LESS 文件，然后最小化 main.css 。
□ 最后，還有對 plugins.js 進行“瘦身”，把 Bootstrap 原來大而全的 bootstrap.min.js 替換成只包含我們用到的 carousel.js、collapse.js 和 transition.js 的壓縮版。然后再壓縮最終的 plugins.js 。
做完以上三項優(yōu)化，整個網(wǎng)站的體量大致將縮小一半。在速度就是生命的年代，既要考慮用戶體驗，又得考慮 SEO 排名，這么大幅度的優(yōu)化可不得了。
此外，還有兩個非常重要的可能性，或許i也應(yīng)該考慮到。
第一，我們可以通過實現(xiàn)響應(yīng)式來進一步優(yōu)化傳送帶圖片。那些圖片太大了，特別是對小屏幕而言，實在沒有必要那么大。相反，如果是像視網(wǎng)膜屏這樣的高密度屏，為保證顯示效果清晰銳利，我們也應(yīng)該提供高分辨率的圖片。
第二，我們知道，觸摸屏設(shè)備的用戶喜歡用手指來回掃屏切換傳送帶圖片?？梢岳贸錾?Hammer.js 插件，只幾步就為傳送帶添加掃屏交互支持。
最終，此例的顯示效果如下：、
顯示效果地址：http://ycdoit.com/show/bootstrap-code-02.html（附《Bootstrap 實戰(zhàn)》的PDF文檔和源碼鏈接：http://pan.baidu.com/s/1slPDoux）
本例源碼下載：bootstrap-code-02.zip
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
- bootstrap table 服務(wù)器端分頁例子分享
- JS組件Bootstrap實現(xiàn)彈出框和提示框效果代碼
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- Bootstrap樹形控件使用方法詳解
- JS組件Bootstrap Select2使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- 頁面遮罩層，并且阻止頁面body滾動。bootstrap模態(tài)框原理
- 使用jQuery和Bootstrap實現(xiàn)多層、自適應(yīng)模態(tài)窗口
- 值得分享的Bootstrap Ace模板實現(xiàn)菜單和Tab頁效果
相關(guān)文章
這篇文章給大家介紹了JS實現(xiàn)按鈕控制計時開始和停止功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
懸浮窗就是圖中微信圖標的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧2019-08-08
javascript每日必學(xué)之循環(huán)，本文的主要內(nèi)容就是循環(huán)，死循環(huán)時進行bug調(diào)式，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了JS實現(xiàn)移動端雙指縮放和旋轉(zhuǎn)方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
基于JavaScript實現(xiàn)在新的tab頁打開url
這篇文章主要介紹了基于JavaScript實現(xiàn)在新的tab頁打開url 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
微信小程序配置服務(wù)器提示驗證token失敗的解決方法
這篇文章主要介紹了微信小程序配置服務(wù)器提示驗證token失敗的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了JS實現(xiàn)漂亮的淡藍色滑動門效果代碼,涉及JavaScript通過自定義函數(shù)遍歷頁面元素及動態(tài)設(shè)置元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
詳解JS中定時器setInterval和setTImeout的this指向問題
在js中setTimeout和setInterval都是用來定時的一個功能，下面這篇文章主要給介紹了JS中setInterval和setTImeout的this指向問題,文中通過示例介紹的很詳細，有需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
Mozilla中顯示textarea中選擇的文字...2006-09-09
這篇文章主要介紹了vue雙向綁定的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03