學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁(yè)等常用組件
更新時(shí)間：2017年05月11日 09:21:46 作者：Cynthia_ying
這篇文章主要教大家學(xué)習(xí)使用Bootstrap輸入框、導(dǎo)航、分頁(yè)等常用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Bootstrap輸入框和導(dǎo)航組件
一.下拉菜單
下拉菜單，就是點(diǎn)擊一個(gè)元素或按鈕，觸發(fā)隱藏的列表顯示出來(lái)。
按鈕和菜單需要包裹在.dropdown 的容器里，而作為被點(diǎn)擊的元素按鈕需要設(shè)置datatoggle=”dropdown”才能有效。對(duì)于菜單部分，設(shè)置 class=”dropdown-menu”才能自動(dòng)隱藏并添加固定樣式。設(shè)置 class=”caret”表示箭頭，可上可下。
示例效果:
代碼：
<body>
<!-- 下拉菜單 -->
<div class="dropdown"> <!-- 加上open會(huì)默認(rèn)顯示下拉菜單選項(xiàng)的內(nèi)容 -->
<!-- <div class="btn-group dropup"> 向上彈出式 -->
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> <!-- 三角符號(hào)：當(dāng)dropdown換成dropup時(shí)候，三角符號(hào)箭頭會(huì)向上 -->
</button>
<ul class="dropdown-menu"> <!-- dropdown-menu-right 設(shè)置對(duì)齊方式：下拉菜單顯示在右邊，默認(rèn)是左邊 -->
<li> <a href="#">首頁(yè)</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">產(chǎn)品</a></li>
<li> <a href="#">關(guān)于</a></li>
</ul>
</div>
<br><!-- 導(dǎo)航其他選項(xiàng)使用 -->
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">網(wǎng)站導(dǎo)航</li> <!-- 設(shè)置菜單標(biāo)題不加超鏈接 -->
<li> <a href="#">首頁(yè)</a></li>
<li> <a href="#">咨訊</a></li>
<li class="divider"> <a href="#">產(chǎn)品</a></li><!-- 設(shè)置菜單分割線 -->
<li class="disabled"> <a href="#">關(guān)于</a></li> <!-- 設(shè)置菜單禁用項(xiàng) -->
</ul>
</div>
</body>
二．輸入框組件
文本輸入框就是可以在<input>元素前后加上文字或按鈕，可以實(shí)現(xiàn)對(duì)表單控件的擴(kuò)展。
例如實(shí)現(xiàn)下列的效果：
代碼示例：
<body>
<!-- 輸入框組件 -->
<!-- 左側(cè)添加文字 -->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<br><!-- 右側(cè)添加文字 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
</div>
<br><!-- 兩側(cè)添加文字,并設(shè)置為最大號(hào)的輸入框 -->
<div class="input-group input-group-lg">
<span class="input-group-addon">￥</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br><!-- 加復(fù)選框 -->
<div class="input-group">
<span class="input-group-addon"><input type="checkbox"></span>
<input type="text" class="form-control">
</div>
<br><!-- 加單選框 -->
<div class="input-group">
<span class="input-group-addon"><input type="radio"></span>
<input type="text" class="form-control">
</div>
<br><!-- 使用按鈕 -->
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">提交</button>
</span>
</div>
<br><!-- 右側(cè)使用下拉菜單或分頁(yè)式 -->
<div class="input-group">
<input ttype="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="#">首頁(yè)</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">產(chǎn)品</a></li>
<li> <a href="#">關(guān)于</a></li>
</ul>
</div>
</input>
</div>
</body>
三. 導(dǎo)航條組件
導(dǎo)航組件，用于實(shí)現(xiàn) Web 頁(yè)面的欄目操作,導(dǎo)航條是網(wǎng)站中作為導(dǎo)航頁(yè)頭的響應(yīng)式基礎(chǔ)組件。
示例效果：
代碼：
<body>
<!-- 導(dǎo)航條組件 -->
<!-- navbar-inverse 反轉(zhuǎn)的樣式（背景是黑色）-->
<!-- navbar-fixed-top導(dǎo)航條固定在頂部，拉動(dòng)滾動(dòng)條是始終早頂部顯示導(dǎo)航條， navbar-fixed-bottom固定在底部 -->
<!-- navbar-static-top 靜態(tài)導(dǎo)航，隨著滾動(dòng)條滾動(dòng)，導(dǎo)航條會(huì)看不見(jiàn) -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 基本導(dǎo)航條包含標(biāo)題和列表 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">標(biāo)題</a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#">首頁(yè)</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">產(chǎn)品</a></li>
<li> <a href="#">關(guān)于</a></li>
</ul>
<!-- 導(dǎo)航條中使用按鈕 -->
<button class="btn btn-default navbar-btn navbar-right">注冊(cè)</button>
<!-- 導(dǎo)航條中使用表單 -->
<form class="navbar-form navbar-right"><!-- navbar-right 設(shè)置搜索框靠右顯示 -->
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default">搜索</button>
</div>
</div>
</form>
<!-- 導(dǎo)航條中使用文本 -->
<button class="btn btn-default navbar-btn navbar-left">登錄</button>
<p class="navbar-text">我是一段文字<a href="#" class="navbar-link">鏈接地址</a></p>
</div>
</nav>
<br><br><!-- 面包屑導(dǎo)航（路徑組件） -->
<ol class="breadcrumb">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">產(chǎn)品列表</a></li>
<li class="active">時(shí)尚春款新裝</li>
</ol>
</body>
四. 分頁(yè)組件
分頁(yè)組件可以提供帶有展示頁(yè)面的功能。
使用演示：
<!-- 分頁(yè)組件 -->
<ul class="pagination pagination-lg"> <!-- 可設(shè)置的尺寸：lg ,默認(rèn)，sm 和 xs -->
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li> <!-- 設(shè)置為首選項(xiàng) -->
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li> <!-- 設(shè)置為禁用項(xiàng) -->
<li><a href="#">»</a></li>
</ul>
<br><!-- 分頁(yè)效果 -->
<ul class="pager"> <!-- 默認(rèn)會(huì)自動(dòng)居中顯示 -->
<li><a href="#">上一頁(yè)</a></li>
<li><a href="#">下一頁(yè)</a></li>
</ul>
<br>
<ul class="pager"> <!-- 設(shè)置分頁(yè)按鈕對(duì)齊分頁(yè)連接 -->
<li class="previous"><a href="#">上一頁(yè)</a></li>
<li class="next"><a href="#">下一頁(yè)</a></li>
</ul>
五. 標(biāo)簽組件
<!-- 標(biāo)簽組件 --> <!-- 在文本后面帶上標(biāo)簽, 標(biāo)簽的樣式有6中：defualt,primary,success,info,warning,danger --> <h3>標(biāo)簽<span class="label label-default">new</span></h3>
六. 徽章組件
<!-- 徽章 -->
<a href="#">未讀信息信息<span class="badge">10</span></a>
<br><!-- 按鈕中使用徽章 -->
<button class="btn btn-success">
提交<span class="badge">5</span>
</button>
<br><!-- 激活狀態(tài)自動(dòng)切換色調(diào) -->
<ul class="nav nav-pills">
<li><a href="active">首頁(yè)<span class="badge">2</span></a></li>
<li><a href="">咨訊</a></li>
</ul>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap輸入框組件簡(jiǎn)單實(shí)現(xiàn)代碼
- bootstrap輸入框組件使用方法詳解
- Bootstrap CSS組件之輸入框組
- Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
- Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
- 基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
- BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼
- Bootstrap輸入框組件使用詳解
相關(guān)文章
將json當(dāng)數(shù)據(jù)庫(kù)一樣操作的javascript lib
使用javascript操作JSON的類庫(kù)TAFFY DB，具體介紹了：查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。2013-10-10
這篇文章主要為大家詳細(xì)介紹了使用Javascript簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對(duì)常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。2009-08-08
這篇文章主要介紹了JS制作適用于手機(jī)和電腦的通知信息效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)分類動(dòng)態(tài)選擇及移動(dòng)功能效果代碼,涉及JavaScript實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫(xiě))
小程序獲取用戶信息這部分其實(shí)不難,但是,他有點(diǎn)麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫(xiě)這兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速的方法詳解
在我們的日常生活中離不開(kāi)網(wǎng)絡(luò)，而網(wǎng)絡(luò)的快慢直接決定了用戶的產(chǎn)品使用體驗(yàn)。本文就來(lái)帶大家了解如何用JavaScript實(shí)現(xiàn)網(wǎng)絡(luò)測(cè)速，需要的可以參考一下2023-01-01
JavaScript實(shí)現(xiàn)手寫(xiě)promise的示例代碼
promise?作為前端開(kāi)發(fā)中常用的函數(shù)，解決了?js?處理異步時(shí)回調(diào)地獄的問(wèn)題，大家應(yīng)該也不陌生了，今天來(lái)學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過(guò)程吧2023-04-04
最近在網(wǎng)上查閱了不少Javascript閉包(closure)相關(guān)的資料，寫(xiě)的大多是非常的學(xué)術(shù)和專業(yè)。對(duì)于初學(xué)者來(lái)說(shuō)別說(shuō)理解閉包了，就連文字?jǐn)⑹龆己茈y看懂。撰寫(xiě)此文的目的就是用最通俗的文字揭開(kāi)Javascript閉包的真實(shí)面目。2010-12-12
使用Post提交時(shí)須將空格轉(zhuǎn)換成加號(hào)的解釋
參數(shù)有中包含空格且使用Post提交時(shí)須將空格轉(zhuǎn)換成加號(hào),這樣后臺(tái)程序接受到的才是真正的空格,感興趣的朋友可以了解下2013-01-01