為了賬號安全,請及時綁定郵箱和手機立即綁定

Bootstrap教程(26)–輪播的實現 原創

1. 概述 要想從頭到尾來實現一個比較好看且穩定的輪播控件,還是有一定難度的。 一個好看的輪播,能瞬間提高網站的整體檔次,很多購物網站或者視頻網站在首頁最顯眼的位置,都是放置輪播大圖組件。 如果是使用Bootstrap框架的話,開發一個輪播就非常容易了,因為Bootstrap已內置輪播組件,拿來即用即可。 本節我們就來學習下Boostrap的輪播組件。 2. 基本輪播 先上代碼如下: <div id="carousel-demo" class="carousel slide" data-ride="carousel"...

94瀏覽
0推薦
0評論

Bootstrap教程(25)--折疊面板、折疊面板導航 原創

1. 概述 上一篇我們講述了折疊插件的用法,可以將任意的div元素包含的內容進行動態的折疊/顯示操作。 本篇來講述折疊中的兩個特例,即折疊面板、折疊面板導航。 2. 折疊面板 折疊面板是將折疊效果應用于多個面板,從而在某一時間至多顯示其中一個面板的控件。 折疊面板實現稍微有些復雜,接下來我們來詳細描述下: 第1步,我么定義折疊面板div元素,并為其命名,需要特別注意panel-group類,表示多個面板的集合,即我們要創建的折疊面板。 <div class="panel-group" id="panel-contai

106瀏覽
0推薦
0評論

Bootstrap教程(24)--折疊插件 原創

1. 概述 折疊的意義是當內容需要是,則顯示在界面上,而內容不需要時,就是折疊收藏起來。 Bootstrap對折疊的實現非常簡單,我們本篇就來演示一番。 2. 通過a元素控制折疊 先看一段代碼: <a type="button" class="btn btn-primary" data-toggle="collapse" href="#section1">顯示春曉文字</a> <div id="section1" class="collapse">...

89瀏覽
0推薦
0評論

Bootstrap教程(23)--標簽頁 原創

1. 概述 標簽頁使用頻率不算高,也不算太低,主要用于同一顯示區域內切換不同的內容。本篇來簡單講一下如何使用標簽頁。 2. 使用方法 首先我們先來看一個標準的標簽頁代碼: <ul class="nav nav-tabs"> <li><a href="#section1" data-toggle="tab">春曉</a></li> <li><a href="#section2"...

99瀏覽
0推薦
0評論

Bootstrap教程(22)--列表組 原創

1. 概述 列表組用來顯示一組關聯的顯示元素,Bootstrap提供了可以靈活使用的列表組組件list-group,本篇就來具體演示下。 2. 普通列表組 用list-group類修飾ul元素,使用list-group-item類修飾li元素,即可創建列表組,代碼如下: 普通列表組: <ul class="list-group"> <li class="list-group-item">第1節</li> <li class="list-group-item">第2節</li> <li...

100瀏覽
0推薦
0評論

Bootstrap教程(21)--響應式導航欄詳解 原創

1. 概述 在很長的一段時間里,我都很羨慕一個一些大神的個人網站。這些網站有一個共同特點,同時支持PC端顯示和手機端顯示。 當使用手機打開時,導航欄會自動折疊為一個按鈕,效果棒極了。 后來學會了Bootstrap才知道,偶買噶,Bootstrap提供的導航欄原來天生就帶這效果。厲害! 2. 響應式導航欄 導航欄的創建還是比較復雜的,但是不要擔心,我們來一步步分析創建過程。 第1步,創建一個導航欄navbar。 <nav class="navbar navbar-default"> </nav> 第2步,添加.container-fluid類

203瀏覽
0推薦
0評論

Bootstrap教程(20)--選項卡式導航、膠囊式導航、面包屑導航 原創

1. 概述 Bootstrap提供了多種導航控件,本篇就來介紹下常用的選項卡式導航、膠囊式導航及面包屑導航。 2. 選項卡式導航 2.1 普通選項卡導航 選項卡式導航,顧明司儀,看起來就像多個選項卡,基本用法如下: 選項卡式導航 <nav> <ul class="nav nav-tabs"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">關于</a></li>...

170瀏覽
0推薦
0評論

Bootstrap教程(19)--下拉菜單、按鈕式下拉菜單 原創

1. 概述 下拉菜單使用頻率也是比較高的,比較常見的使用場景是在導航菜單欄,某個主菜單含有下拉的子菜單。 Bootstrap為下拉菜單提供了兩種實現方式,即普通的下拉菜單還有按鈕式的下拉菜單。我們先看一張圖觀察下,從圖中可以看出,普通下拉菜單和按鈕式下拉菜單的樣式基本相同,唯一比較明顯的區別是:普通下拉菜單相當于菜單,前后自動換行;而按鈕式的下拉菜單相當于按鈕,前后不換行。 2. 下拉菜單 2.1 普通下拉菜單 先來看下普通下拉菜單的示例代碼,通過dropdown描述一個下拉菜單

163瀏覽
0推薦
0評論

Bootstrap教程(18)--進度條 原創

1. 概述 進度條的使用頻率并不高,但是如果遇到合適的場景,使用之后對顯示效果的提升還是比較明顯的。 Bootstrap為進度條提供了比較優雅的實現,本篇就來介紹下常見用法。 2. 普通進度條 先看一段代碼: <div class="progress"> <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">...

159瀏覽
0推薦
0評論

Bootstrap教程(17)--分頁 原創

1. 概述 Bootstrap除了提供了表格,還提供了分頁控件,使用起來也是比較簡單,推薦大家嘗試。 2. 基本分頁 通過為<ul>元素設置pagination類,即可將列表轉化為分頁控件。示例代碼: <div class="col-md-12"> 普通分頁:<br> <ul class="pagination"> <li> <a class="btn"><span class="glyphicon...

168瀏覽
0推薦
0評論

Bootstrap教程(16)--模態框 原創

1. 概述 模態框這個名字有點高雅了,其實就是對話框,用來彈出一個新的界面。 模態框的使用非常的場景,例如在用戶管理頁面,當進行用戶新增時,可以點擊新增按鈕,彈出一個窗體供填入用戶信息然后保存。 注意Bootstrap的模態框一次只能顯示一個,不能在打開一個模態框后嘗試繼續打開第二個。 2. 模態框樣式 模態框相關的樣式類比較多,我個人是感覺有些過于復雜了,當然這里也不排除Bootstrap開發人員有意為之,畢竟復雜之后拓展時就更加容易。 我們直接來看一個示例: <!-- 模態框

194瀏覽
0推薦
0評論

Bootstrap教程(15)--警告框、彈出框、工具提示框 原創

1. 概述 本篇介紹的幾種顯示提示信息的方式,這幾種方式并不常用,大家了解即可。 2. 警告框 2.1 普通警告框 警告框用來顯示一些希望讓用戶注意到的內容,例如上傳文件時的主要注意的警示信息,或者更加嚴重的上傳失敗的提示信息。 警告框有4中具體樣式類,我們通過一個示例來演示下: <div class="col-md-12"> <div class="alert alert-info"> alert-info警告框 </div> <div class="alert alert-success">...

235瀏覽
0推薦
0評論

Bootstrap教程(14)--媒體與媒體列表 原創

1. 概述 看到媒體,不要誤解,此處媒體不是指的單純的圖形、視頻、音頻等媒體形式,而是指的Bootstrap中提供的一種顯示組件。 Bootstrap媒體一般由文字、圖像構成,大多數情況下圖像作為一個抽象代表,文字作為內容描述。 舉個最常見例子,微信中的聊天會話就是一個典型的媒體,左側是頭像,右側上方是微信名稱,右側下方是最新的消息內容。 接下來我們就來使用Bootstrap實現下媒體。 2. 媒體實現 我們以微信聊天會話為例實現下媒體。 首先,我們設置一個媒體對象。 <div class="medi

196瀏覽
0推薦
0評論

一個實例看懂JS四種創建對象方式的區別 原創

1. 概述 JS中常用的創建對象方式有四種: 對象字面量 new Object() 構造函數 Object.create() 這四種方式雖然都能創建對象,但是還是有區別的,接下來我們研究下。 2. 功能相同 先來看一個實例,我們使用4種方式創建4個對象。 // 對象字面量 var dog1 = { name: '大黃', age: 2, speak: function () { console.log("汪汪"); } } // 使用Object var dog2 = new Object(); dog2.name = "大黃"; dog2.age = 2;...

178瀏覽
0推薦
0評論

JavaScript匿名函數、自執行匿名函數 原創

1. 函數也是一種類型 要理解匿名函數,首先需要理解函數也是一種類型。 所以函數可以賦值給變量,如下: // 將數字類型值賦給變量 var num = 1; // 將函數類型值賦給變量 var hello = function () { console.log("hello world"); } // 執行num表達式 num++; // hello hello(); 由于數字類型和函數類型不同,數字類型可以進行運算,例如上面的++,而函數類型可以進行調用運算,就是()。 2. 匿名函數 一般的函數是需要命名然后調用的,如下例中,函數被命名為add,

139瀏覽
0推薦
0評論

從Array.forEach學習將函數作為參數 原創

1. 背景 JS語言中,Array數組類型有一個遍歷方法forEach,經常使用卻經常迷惑。 var array = [1, 2, 3, 4, 5]; array.forEach(function (item, index) { console.log("index:%d,item:%d", index, item); }); 輸出如下: index:0,item:1 index:1,item:2 index:2,item:3 index:3,item:4 index:4,item:5 我對這種用法非常熟悉,但是總感覺這種語法很別扭,所以今天要鉆研一番。 2. 理論基礎...

1083瀏覽
8推薦
5評論

Bootstrap教程(13)--圖像和縮略圖組 原創

1. 概述 圖片比文字傳達信息更加直觀、更加具象,具備不可代替的意義。 必不可少的,Bootstrap也為圖像提供了一定支持,本篇就來具體介紹下。 2. 響應式圖像 通過給圖像設置.img-responsive類,即可將圖像設置為響應式圖像,可以自動適應容器的大小。 <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive"> 3. 圖像樣式 Bootstrap還為圖像提供了三種常見的樣式: .img-rounded:圓角圖像 .img-thumbnail:縮略圖樣式...

194瀏覽
0推薦
0評論

Bootstrap教程(12)--使用圖標 原創

1. 背景 大家都曉得,使用圖標后,頁面效果肯定是好許多的。 一個簡單的按鈕,添加圖標后,有一種傳神的效果。精美的圖標是要收費的,你享受人家優秀的成果,就得付出相應的價錢。 有一個相當不錯的圖標庫Glyphicon,老外做的,一般情況下咱們要正兒八經的使用,是要收費的。 但是在Bootstrap框架下,使用Glyphicon圖標是免費的,就是這么神奇! 2. 使用Glyphicon圖標 使用Glyphicon圖標很簡單,為<span>標簽添加相應的樣式類即可,例如搜索圖標。 <span class="glyphicon glyphicon-

171瀏覽
0推薦
0評論

Bootstrap教程(11)--按鈕與按鈕組 原創

1. 概述 按鈕可以說是使用頻率最高的交互組件之一了,Bootstrap框架對按鈕也非常重視,提供了多種樣式強化類。同時還提供了按鈕組,可以組合使用按鈕,更加方便。 2. 按鈕的使用 2.1 設置Bootstrap按鈕 在Bootstrap框架下,只需要為按鈕添加.btn類,然后添加.btn-default類,即可創建Bootstrap樣式的按鈕。 注意Bootstrap可以將<button>、<a>、<input type="button">元素轉換為統一樣式風格的按鈕,推薦還是使用<button>,更加符合HTML規范。 示例代碼: <button...

194瀏覽
0推薦
0評論

Bootstrap教程(10)--使用輸入組來組合控件 原創

1. 概述 Bootstrap還提供了一種組合使用表單控件的方式,即輸入組。可以為輸入控件添加前置、后置的補充內容。 注意補充內容可以是文本,也可以是其他表單控件。 2. 使用輸入組 輸入組的使用并不復雜,通過.input-group類修飾的元素包裹輸入控件,然后在輸入控件的前、后添加.input-group-addon類修飾的元素即可。 代碼如下: <div class="col-md-6"> <div class="form-group"> <div class="input-group"> <div...

186瀏覽
0推薦
0評論
首頁上一頁1234567下一頁尾頁
意見反饋 幫助中心 APP下載
官方微信
lpl竞猜