Bootstrap基本組件學(xué)習(xí)筆記之導(dǎo)航(10)
Bootstrap的導(dǎo)航很有特色,主要分為膠囊式導(dǎo)航、面包屑導(dǎo)航、頭部導(dǎo)航共3大類,可以滿足絕大部分需求。
0x01 膠囊式導(dǎo)航
膠囊式導(dǎo)航采用的是無序列表ul來實(shí)現(xiàn):
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>膠囊式導(dǎo)航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>膠囊式導(dǎo)航</h1> </div> <div class="col-lg-3"> <h3>水平樣式</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> <div class="col-lg-3"> <h3>垂直樣式</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> </div> </body> </html>
效果如下:
0x02面包屑導(dǎo)航
面包屑導(dǎo)航采用的是有序列表ol來實(shí)現(xiàn):
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>面包屑導(dǎo)航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>面包屑導(dǎo)航</h1> </div> <div class="breadcrumb"> <li class="active"><a href="#">學(xué)校</a></li> <li><a href="#">一年級</a></li> <li><a href="#">一班</a></li> </div> </div> </body> </html>
效果如下:
0x03 頭部導(dǎo)航
頭部導(dǎo)航在網(wǎng)站開發(fā)中比較常見,依賴于Bootstrap庫的collapse插件。基本樣式如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <style> /*body{*/ /*padding-top: 50px;*/ /*}*/ </style> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>頭部導(dǎo)航</title> </head> <body> <div class="container"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">網(wǎng)站標(biāo)題</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首 頁</a></li> <li><a href="#">新聞</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">菜單1</a></li> <li><a href="#">菜單2</a></li> <li><a href="#">菜單3</a></li> </ul> </li> </ul> <form class="nav navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="用戶名"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="密碼"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary form-control">提 交</button> </div> </form> </div> </nav> <div class="page-header"> <h1>頭部導(dǎo)航</h1> </div> <div> <p>內(nèi)容</p> </div> </div> </body> </html>
效果如下:
當(dāng)屏幕寬度很窄時(shí),會出現(xiàn)下面樣式:
這是因?yàn)槲覀冊趯?shí)現(xiàn)過程中使用了如下代碼:
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- Bootstrap~多級導(dǎo)航(級聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之附加導(dǎo)航(Affix)插件
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- 第一次接觸神奇的Bootstrap導(dǎo)航條
相關(guān)文章
js文件中引入另一個(gè)js文件的4種方法總結(jié)
JavaScript文件是一個(gè)文本類型的文件,在任何文本編輯器中都可以被打開和編輯,JavaScript文件的擴(kuò)展名為js,這篇文章主要給大家介紹了關(guān)于js文件中引入另一個(gè)js文件的4種方法總結(jié),需要的朋友可以參考下2023-12-12jscript之Read an Excel Spreadsheet
jscript之Read an Excel Spreadsheet...2007-06-06javascript實(shí)現(xiàn)仿IE頂部的可關(guān)閉警告條
仿windows IE頂部的敬告工具條,帶關(guān)閉按鈕,設(shè)計(jì)還算精美,你完全可以用到自己的網(wǎng)頁用于顯示提示等方面,有需要的小伙伴可以參考下。2015-05-05詳解extract-text-webpack-plugin 的使用及安裝
這篇文章主要介紹了詳解extract-text-webpack-plugin 的使用及安裝,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06