Bootstrap輸入框和導(dǎo)航組件
一.下拉菜單
下拉菜單，就是點(diǎn)擊一個(gè)元素或按鈕，觸發(fā)隱藏的列表顯示出來。
按鈕和菜單需要包裹在.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="#">首頁</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="#">首頁</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è)使用下拉菜單或分頁式 --> <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="#">首頁</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 頁面的欄目操作,導(dǎo)航條是網(wǎng)站中作為導(dǎo)航頁頭的響應(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ì)看不見 --> <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="#">首頁</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="#">首頁</a></li> <li><a href="#">產(chǎn)品列表</a></li> <li class="active">時(shí)尚春款新裝</li> </ol> </body>
四. 分頁組件
分頁組件可以提供帶有展示頁面的功能。
使用演示：
<!-- 分頁組件 --> <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><!-- 分頁效果 --> <ul class="pager"> <!-- 默認(rèn)會(huì)自動(dòng)居中顯示 --> <li><a href="#">上一頁</a></li> <li><a href="#">下一頁</a></li> </ul> <br> <ul class="pager"> <!-- 設(shè)置分頁按鈕對(duì)齊分頁連接 --> <li class="previous"><a href="#">上一頁</a></li> <li class="next"><a href="#">下一頁</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">首頁<span class="badge">2</span></a></li> <li><a href="">咨訊</a></li> </ul>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
