神奇的Bootstrap 菜单 导航 全面分析

最新推荐文章于 2025-05-29 17:34:35 发布
转载 最新推荐文章于 2025-05-29 17:34:35 发布 · 1.7k 阅读 · 3

本文介绍如何在Bootstrap中创建下拉菜单和导航条，包括基本用法、带有二级菜单的示例代码及效果展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转自：http://blog.youkuaiyun.com/smartbetter/article/details/52056272

本篇将主要介绍Bootstrap的菜单、导航。

本篇开始将引入javascript相关文件，如下：

<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- 放置在body标签结尾处，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

在Bootstrap中，下拉菜单组件是一个独立的组件。Bootstrap的组件交互效果都是依赖于jquery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效。

1.下拉菜单-基本用法

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>下拉菜单基本用法<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span>></span>
    <span class="hljs-comment"><!--css样式--></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> ></span><span class="css">
        <span class="hljs-tag">body</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">50</span>px</span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">50</span>px</span></span>;<span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default dropdown-toggle"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"dropdownMenu1"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span>></span>
        下拉菜单<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menu"</span> <span class="hljs-attribute">aria-labelledby</span>=<span class="hljs-value">"dropdownMenu1"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单1<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单2<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-comment"><!--设置菜单项状态为当前状态（.active）--></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单3<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-comment"><!--设置菜单项状态为禁用状态（.disabled）--></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单4<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-comment"><!--下拉分隔线--></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单4<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-header"</span>></span>菜单标题<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单5<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单6<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span> 
<span class="hljs-comment"><!-- 放置在文档的结尾，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li></ul>

注意：有时候会有向上弹起的需求，那么只需要在“dropdown”类名基础上追加“dropup”类名即可。

效果图如下：

下拉菜单基本用法上弹菜单基本用法

2.下拉菜单-对齐方式

Bootstrap中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--省略部分如1中代码--></span>
...
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default dropdown-toggle"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"dropdownMenu1"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span>></span>
        下拉菜单<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu pull-right"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menu"</span> <span class="hljs-attribute">aria-labelledby</span>=<span class="hljs-value">"dropdownMenu1"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>下拉菜单项<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"presentation"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"menuitem"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>下拉菜单项<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span> 
...</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

效果图如下：

下拉菜单的对齐方式效果图

3.按钮-按钮组

按钮组也是一个独立的组件。需要依赖于button.js插件才能正常运行。而bootstrap.js已集成了button.js插件功能。

用法：使用“btn-group”容器，把多个按钮放到这个容器中。如下所示：

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>按钮组<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span>></span>
    <span class="hljs-comment"><!--css样式--></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> ></span><span class="css">
        <span class="hljs-tag">body</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>; <span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn-group"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-step-backward"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-fast-backward"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-backward"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-play"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-pause"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-stop"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-forward "</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-fast-forward"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-step-forward"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-search"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-zoom-in"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-zoom-out"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-download"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"glyphicon glyphicon-upload"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>     
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 放置在文档的结尾，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li></ul>

效果图如下：

按钮组

4.按钮-嵌套分组

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用Bootstrap按钮的嵌套分组的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。如下所示：

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--省略部分如3中代码--></span>
...
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn-group"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn-group"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default dropdown-toggle"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>移动开发<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">button</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>Android<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>IOS<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>Java Web开发<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>PHP开发<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>大数据<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
...</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

效果图如下：

按钮-嵌套分组

在实际运用当中，总会碰到垂直显示的效果。在Bootstrap中也提供了这样的风格。我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现按钮的垂直分组。

5.按钮-等分按钮

等分按钮（自适应分组按钮）实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn-group btn-group-justified"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>三分之一<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>三分之一<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>三分之一<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

效果图如下：

等分按钮

6.导航-基本用法

Bootstrap中制作导航条主要通过“.nav”样式。.nav”必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>导航-基本用法<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span>></span>
    <span class="hljs-comment"><!--css样式--></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> ></span><span class="css">
        <span class="hljs-tag">body</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-tabs"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>新闻<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--标签形tab导航--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>反馈<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-comment"><!-- 放置在文档的结尾，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul>

效果图如下：

导航-基本用法

7.导航-胶囊形(pills)导航

胶囊形（pills）导航，当前项高亮显示，并带有圆角效果。只需要把类名“nav-tabs”换成“nav-pills”即可：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-pills"</span>></span>
    <span class="hljs-comment"><!--当前状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--悬浮状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>新闻<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-toggle"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span>></span>博客<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu"</span>></span>
            <span class="hljs-comment"><!--二级菜单--></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>前端博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>Java博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>反馈<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li></ul>

效果图如下：

胶囊形(pills)导航

8.导航-垂直堆叠的导航

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-pills nav-stacked"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>新闻<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>反馈<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

效果图如下：

垂直堆叠的导航

9.导航-自适应导航

自适应导航“nav-justified”（源码请查阅bootstrap.css文件第3585行～第3607行）需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav nav-tabs nav-justified"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>新闻<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>反馈<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

效果图如下：

自适应导航

10.导航-面包屑式

面包屑（Breadcrumb）也是一个独立模块组件，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。使用方式很简单，为ol加入breadcrumb类：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">ol</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"breadcrumb"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>中国<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span>北京<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ol</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>



面包屑式导航





转载请注明出处：http://blog.youkuaiyun.com/smartbetter/article/details/52056377

导航条（navbar）在Bootstrap中是一个独立组件，导航条（navbar）和导航（nav）在Bootstrap中是有明显的区别的。在导航条（navbar）中有一个背景色、而且导航条可以是纯链接、表单、表单和导航一起结合等多种形式。

1.实战一-带二级菜单和表单的导航条

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>导航条<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span>></span>
    <span class="hljs-comment"><!--css样式--></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> ></span><span class="css">
        <span class="hljs-tag">body</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-default"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"navigation"</span>></span>
    <span class="hljs-comment"><!--标题通过“navbar-header”和“navbar-brand”来实现--></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-toggle"</span>></span>博客<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"caret"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
        <span class="hljs-comment"><!--二级菜单--></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>二级菜单<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
    <span class="hljs-comment"><!--表单--></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">action</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-form navbar-left"</span> <span class="hljs-attribute">rol</span>=<span class="hljs-value">"search"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"请输入关键词"</span> /></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span>></span>搜索<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 放置在文档的结尾，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li></ul>

效果图如下：

带二级菜单和表单的导航条

Bootstrap的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素：

1）导航条中的按钮navbar-btn
2）导航条中的文本navbar-text
3）导航条中的普通链接navbar-link

2.实战二-固定导航条

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--顶部导航条--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-default navbar-fixed-top"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"navigation"</span>></span>
  　<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header"</span>></span>
  　    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
  　<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
     <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
     <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!--底部导航条--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-default navbar-fixed-bottom"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"navigation"</span>></span>
  　<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header"</span>></span>
  　    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
  　<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
     <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
     <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!--正文内容--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"content"</span>></span>网页正文内容<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li></ul>

效果图如下：

固定导航条

3.实战三-响应式导航条

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-default"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"navigation"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header"</span>></span>
        <span class="hljs-comment"><!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-toggle"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"collapse"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">".navbar-responsive-collapse"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-bar"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-bar"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-bar"</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
        <span class="hljs-comment"><!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --></span>
        <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-comment"><!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，
        显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"collapse navbar-collapse navbar-responsive-collapse"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li></ul>

效果图如下：

响应式导航条

有的时候会有需要反色的情况，Bootstrap为此提供了反色导航条，只是将navbar-deafult类名换成navbar-inverse，然后导航条的背景色和文本的颜色就会修改。

4.实战四-分页导航

1）带页码的分页导航

<code class="hljs xml has-numbering"><span class="hljs-comment"><!-- pagination：正常大小
    pagination-lg：让分页导航变大 
    pagination-sm：让分页导航变小--></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pagination pagination"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>&laquo;首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>1<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>2<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--当前状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>3<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>4<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>5<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>尾页&raquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li></ul>

效果图如下：

带页码的分页导航

2）翻页分页导航

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pager"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>&laquo;上一页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-comment"><!--禁用状态--></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"disabled"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>下一页&raquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span> 
<span class="hljs-comment"><!--左右对齐--></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pager"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"previous"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>&laquo;上一页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"next"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>下一页&raquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>

效果图如下：

翻页分页导航

5.实战五-标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，例如：

标签示例图

Bootstrap中将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。和按钮元素button类似，label样式也提供了多种颜色，主要是通过这几个类名来修改背景颜色和文本颜色：

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-default"</span>></span>默认标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-primary"</span>></span>主要标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-success"</span>></span>成功标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-info"</span>></span>信息标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-warning"</span>></span>警告标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label label-danger"</span>></span>错误标签<span class="hljs-tag"></<span class="hljs-title">span</span>></span> </code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

效果图如下：

标签

6.实战六-徽章

徽章多用于提醒有多少未读消息这样的需求，在Bootstrap中，使用“badge”样式来实现徽章效果。

<code class="hljs xml has-numbering"><span class="hljs-comment"><!--navbar-default导航条勋章--></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar navbar-default"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"navigation"</span>></span>
  　<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-header"</span>></span>
  　    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-brand"</span>></span>标题<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
  　<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav navbar-nav"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>论坛<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"badge"</span>></span>10<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"##"</span>></span>反馈<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

效果图如下：

徽章

7.实战七-带动画过渡的弹出框

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>带动画过的渡弹出框<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span>></span>
    <span class="hljs-comment"><!--css样式--></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> ></span><span class="css">
        <span class="hljs-tag">body</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;<span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>

<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span>></span>点击我<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal fade"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"mymodal"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-dialog"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-content"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-header"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"close"</span> <span class="hljs-attribute">data-dismiss</span>=<span class="hljs-value">"modal"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">aria-hidden</span>=<span class="hljs-value">"true"</span>></span>&times;<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>></span>Close<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">h4</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-title"</span>></span>弹出窗标题<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-body"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">p</span>></span>弹出窗主体内容<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"modal-footer"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-default"</span> <span class="hljs-attribute">data-dismiss</span>=<span class="hljs-value">"modal"</span>></span>关闭<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-primary"</span>></span>保存<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- /.modal-content --></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- /.modal-dialog --></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-comment"><!-- /.modal --></span>

<span class="hljs-comment"><!-- 放置在文档的结尾，使页面加载速度更快 --></span>
<span class="hljs-comment"><!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://libs.baidu.com/jquery/1.9.0/jquery.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-comment"><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
    $(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        $(<span class="hljs-string">".btn"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            $(<span class="hljs-string">"#mymodal"</span>).modal(<span class="hljs-string">"toggle"</span>);
        });
    });
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li></ul>

效果图如下：

带动画过渡的弹出框





程序小兵
关注
前端领域的先锋尝试：Bootstrap的响应式导航栏设计
AI架构全栈开发实战笔记
05-06 655
本文旨在深度解析Bootstrap框架中响应式导航栏的技术实现，涵盖从基础概念到高级定制的完整知识体系。响应式设计的基本原理Bootstrap导航栏的架构设计移动优先策略的实现细节实际项目中的最佳实践研究范围包括Bootstrap 3到5版本的演进过程，特别关注当前主流版本Bootstrap 5的技术实现。文章采用由浅入深的结构，首先介绍核心概念，然后深入技术细节，最后通过实战案例巩固理解。每个技术点都配有可视化图表和可运行的代码示例。响应式设计(Responsive Design)
五、Bootstrap之菜单栏和导航栏
Itcodewizard的博客
05-14 4235
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
bootstrap中的导航菜单
weixin_42289273的博客
06-15 452
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap中的导航元素</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <sc.
Bootstrap4 导航栏
最新发布
unber的博客
05-29 909
导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。
Bootstrap（二）Bootstrap菜单、模态框、及其他样式类
COOL66BOY的博客
03-16 2338
文章目录Bootstrap菜单（导航条）bootstrap模态框路径导航巨幕CSS一个补充-媒体查询 具体更多更详细的信息与使用方法访问中文官网：https://www.bootcss.com/ 也要注意图片的响应式。 Bootstrap菜单（导航条） navbar 声明导航条 navbar-default 声明默认的导航条样式 navbar-inverse 声明黑色的导航条 navbar-static-top 去掉导航条的圆角 navbar-fixed-top 将导航条固定到顶部 navbar-fi
Bootstrap(四) 菜单、按钮及导航
ssisse的博客
04-27 2436
本文转自：http://www.imooc.com/learn/141 下拉菜单（基本用法） 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：   ☑  LESS版本：对应的源码文件为 dropdowns.less   ☑  Sass版本：对应的源码文件为 _dropdowns.scss   ☑
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
Bootstrap完整案例
12-04
首先，"Bootstrap示例----树形菜单"部分，这通常涉及到使用Bootstrap的导航组件来创建可折叠的层次结构，这种菜单在展示多级分类或者组织结构时非常有用。Bootstrap的导航组件允许开发者通过CSS类轻松实现这种交互...
Bootstrap 4导航栏布局解构及工作原理解析
资源摘要信息:"Bootstrap 4是一个广泛使用的前端框架，它让Web开发者...本文通过详细分析Bootstrap 4导航栏的HTML结构、CSS样式以及其对HTML5和CSS3的支持，为你提供了一个全面了解和使用Bootstrap 4导航栏的机会。
全面解析Bootstrap中scrollspy（滚动监听）的使用方法
09-02
Bootstrap中的Scrollspy是一个非常实用的功能，它允许开发者创建一个响应式的导航菜单，自动高亮当前在视口中的页面部分。Scrollspy通过监听滚动事件，实时更新导航菜单中的激活状态，从而提供用户更好的浏览体验。...
李炎恢Bootstrap教程：全面掌握前端开发
7. **实战项目演示**：可能包含使用Bootstrap框架开发的完整项目的案例分析。 ### 知识点五：Bootstrap在前端开发中的应用 1. **快速开发**：利用Bootstrap，前端开发者可以快速搭建项目原型，加速开发流程。 2. ...
右键菜单BootstrapMenu.js
10-11
Html网页基于 BootStrap 的右键菜单，用于前后台开发，很好的工具
右键菜单BootstrapMenu.min.js
06-14
BootstrapMenu.min.js的资源，用于右键菜单 用于前台开发的,很好用的工具 让前台开发更加的容易上手而且 设计出来的还很好看
bootstrap-submenu
06-28
bootstrap风格的多级菜单工具，亲测有效十分好用。bootstrap风格的多级菜单工具，亲测有效十分好用。bootstrap风格的多级菜单工具，亲测有效十分好用。
Bootstrap菜单、导航、按钮
Jenice的博客
05-22 689
1、下拉菜单： 在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。 当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。 你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件： 特别声明：因为Bootstra
bootstrap-menu 右键菜单
哂笑年少°
03-08 1253
1.首先引入**BootstrapMenu.min.js** 链接：https://pan.baidu.com/s/1KxVhRub5TfOROaRxYGJDVg 提取码：o5t4 // 操作代码 var menu = new BootstrapMenu('.table tbody tr', {//获取表格当前点击的行 fetchElementData: function (row) { //fetchElementData获取原数据并返回 var dat
Bootstrap 菜单
soindy
03-22 1802
基本用法小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件。在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：<scri
Bootstrap 下拉菜单
lly202406的博客
01-16 772
Bootstrap 是一个流行的前端框架，它提供了许多预构建的组件，其中之一就是下拉菜单。下拉菜单是一个交互式元素，允许用户从一系列选项中选择一个。在本篇文章中，我们将详细介绍如何在 Bootstrap 中创建和使用下拉菜单，包括基本结构、样式定制和交互功能。
bootstrap 菜单
weixin_33738555的博客
01-15 440
1.bootstrap图片 img-responsive 声明响应式图片 2.bootstrap 字体图标 通过字体代替图标，font文件夹需要和css文件夹在同一目录 3.bootst导航条 （1）navbar 声明导航条（2）navbar-default 声明默认的导航条样式（3）navbar-inverse 声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值