欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面接觸神奇的Bootstrap導(dǎo)航條實戰(zhàn)篇

 更新時間：2016年08月01日 10:07:25   作者：smartbetter  
導(dǎo)航條（navbar）在Bootstrap中是一個獨立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯區(qū)別的，本文全面接觸神奇的Bootstrap導(dǎo)航條，感興趣的小伙伴們可以參考一下

導(dǎo)航條（navbar）在Bootstrap中是一個獨立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯的區(qū)別的。在導(dǎo)航條（navbar）中有一個背景色、而且導(dǎo)航條可以是純鏈接、表單、表單和導(dǎo)航一起結(jié)合等多種形式。

1.實戰(zhàn)一-帶二級菜單和表單的導(dǎo)航條

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>導(dǎo)航條</title>
 <link rel="stylesheet" >
 <!--css樣式-->
 <style >
 body{margin:30px;padding:30px;}
 </style>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
 <!--標(biāo)題通過“navbar-header”和“navbar-brand”來實現(xiàn)-->
 <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 class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a>
 <!--二級菜單-->
 <ul class="dropdown-menu">
 <li><a href="##">二級菜單</a></li>
 </ul>
 </li>
 <li><a href="##">論壇</a></li>
 </ul>
 <!--表單-->
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="請輸入關(guān)鍵詞" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
<!-- 放置在文檔的結(jié)尾，使頁面加載速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

效果圖如下：

帶二級菜單和表單的導(dǎo)航條

Bootstrap的導(dǎo)航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，還可以使用其他元素：

1）導(dǎo)航條中的按鈕navbar-btn
2）導(dǎo)航條中的文本navbar-text
3）導(dǎo)航條中的普通鏈接navbar-link

2.實戰(zhàn)二-固定導(dǎo)航條

<!--頂部導(dǎo)航條-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 　<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="##">論壇</a></li>
  </ul>
</div>
<!--底部導(dǎo)航條-->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 　<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="##">論壇</a></li>
  </ul>
</div>
<!--正文內(nèi)容-->
<div class="content">網(wǎng)頁正文內(nèi)容</div>

效果圖如下：

固定導(dǎo)航條

3.實戰(zhàn)三-響應(yīng)式導(dǎo)航條

效果圖如下：

響應(yīng)式導(dǎo)航條

有的時候會有需要反色的情況，Bootstrap為此提供了反色導(dǎo)航條，只是將navbar-deafult類名換成navbar-inverse，然后導(dǎo)航條的背景色和文本的顏色就會修改。

4.實戰(zhàn)四-分頁導(dǎo)航

1）帶頁碼的分頁導(dǎo)航

<!-- pagination：正常大小
 pagination-lg：讓分頁導(dǎo)航變大 
 pagination-sm：讓分頁導(dǎo)航變小-->
<ul class="pagination pagination">
 <li><a href="#">&laquo;首頁</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <!--當(dāng)前狀態(tài)-->
 <li class="active"><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <!--禁用狀態(tài)-->
 <li class="disabled"><a href="#">尾頁&raquo;</a></li>
</ul>

效果圖如下：

帶頁碼的分頁導(dǎo)航

2）翻頁分頁導(dǎo)航

<ul class="pager">
 <li><a href="#">&laquo;上一頁</a></li>
 <!--禁用狀態(tài)-->
 <li class="disabled"><a href="#">下一頁&raquo;</a></li>
</ul> 
<!--左右對齊-->
<ul class="pager">
 <li class="previous"><a href="#">&laquo;上一頁</a></li>
 <li class="next"><a href="#">下一頁&raquo;</a></li>
</ul>

效果圖如下：

翻頁分頁導(dǎo)航

5.實戰(zhàn)五-標(biāo)簽

在一些Web頁面中常常會添加一個標(biāo)簽用來告訴用戶一些額外的信息，例如：

標(biāo)簽示例圖

Bootstrap中將這樣的效果提取出來成為一個標(biāo)簽組件，并且以“.label”樣式來實現(xiàn)高亮顯示。和按鈕元素button類似，label樣式也提供了多種顏色，主要是通過這幾個類名來修改背景顏色和文本顏色：

效果圖如下：

標(biāo)簽

6.實戰(zhàn)六-徽章

徽章多用于提醒有多少未讀消息這樣的需求，在Bootstrap中，使用“badge”樣式來實現(xiàn)徽章效果。

<!--navbar-default導(dǎo)航條勛章-->
<div class="navbar navbar-default" role="navigation">
 　<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="##">論壇<span class="badge">10</span></a></li>
  <li><a href="##">反饋</a></li>
 </ul>
</div>

效果圖如下：

徽章

7.實戰(zhàn)七-帶動畫過渡的彈出框

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>帶動畫過的渡彈出框</title>
 <link rel="stylesheet" >
 <!--css樣式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>

<button class="btn btn-primary" type="button">點擊我</button>
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
     <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">彈出窗標(biāo)題</h4>
   </div>
   <div class="modal-body">
    <p>彈出窗主體內(nèi)容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 放置在文檔的結(jié)尾，使頁面加載速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
 $(function(){
  $(".btn").click(function(){
   $("#mymodal").modal("toggle");
  });
 });
</script>
</body>
</html>

效果圖如下：

帶動畫過渡的彈出框

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

相關(guān)文章

  • JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用

    JavaScript立即執(zhí)行函數(shù)與函數(shù)劫持的作用

    IIFE全拼Imdiately Invoked Function Expression,是一個在定義的時候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-01-01
  • JavaScript iframe數(shù)據(jù)共享接口實現(xiàn)方法

    JavaScript iframe數(shù)據(jù)共享接口實現(xiàn)方法

    在iframe與父窗口或者與子窗口傳遞數(shù)據(jù)是一個麻煩的事情，如果我們能夠?qū)懸粋€一勞永逸的接口那就再方便不過了，下面就來簡答介紹一下如何實現(xiàn)此功能，對js iframe相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析

    javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法分析

    這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之串的概念與用法,簡單講述了串的概念、功能并結(jié)合實例形式分析了基于javascript實現(xiàn)串的遍歷、比較、查找等相關(guān)操作技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript從0開始構(gòu)思表情插件

    JavaScript從0開始構(gòu)思表情插件

    在項目開發(fā)階段很多項目都會用到表情插件，接下來通過本文給大家介紹了JavaScript從0開始構(gòu)思表情插件 的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼

    JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼

    本篇文章主要是對JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • javascript中動態(tài)函數(shù)用法實例分析

    javascript中動態(tài)函數(shù)用法實例分析

    這篇文章主要介紹了javascript中動態(tài)函數(shù)用法,實例分析了動態(tài)函數(shù)的定義方法與使用技巧,需要的朋友可以參考下
    2015-05-05
  • Js查找字符串中出現(xiàn)次數(shù)最多的字符及個數(shù)實例解析

    Js查找字符串中出現(xiàn)次數(shù)最多的字符及個數(shù)實例解析

    這篇文章主要介紹了Js查找字符串中出現(xiàn)次數(shù)最多的字符及個數(shù) ,本文分為傳統(tǒng)寫法和正則寫法兩種方法給大家介紹了js查找字符串出現(xiàn)次數(shù)最多的字符及個數(shù)，非常不錯，感興趣的朋友參考下吧
    2016-09-09
  • JS co 函數(shù)庫的含義和用法實例總結(jié)

    JS co 函數(shù)庫的含義和用法實例總結(jié)

    這篇文章主要介紹了JS co 函數(shù)庫的含義和用法,結(jié)合實例形式總結(jié)分析了JS co 函數(shù)庫的基本含義、功能、用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • DOM事件探秘篇

    DOM事件探秘篇

    本文主要介紹了DOM事件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • 基于Javascript實現(xiàn)倒計時功能

    基于Javascript實現(xiàn)倒計時功能

    這篇文章主要為大家詳細介紹了基于Javascript實現(xiàn)倒計時功能的相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-02-02

最新評論