适合初学者的教程——Bootstrap导航栏

bootstrap基础教程案例代码

一、概述Bootstrap是一个用于快速开发响应式网页的前端框架，其具有易用性和功能丰富的特点，广泛应用于各种网页开发中。

本文将介绍Bootstrap的基础教程以及相关案例代码，帮助读者快速掌握Bootstrap的使用方法。

二、Bootstrap基础教程1. 栅格系统Bootstrap基于12列的栅格系统，可以轻松实现页面布局。

以下是一个简单的例子：```html<div class="cont本人ner"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div>```在这个例子中，页面被分成了三列，每一列占据了页面宽度的1/3。

2. 响应式工具类Bootstrap提供了一系列的响应式工具类，可以根据不同的屏幕尺寸来显示或隐藏元素。

要在小屏幕设备上隐藏一个元素，可以使用`d-none d-sm-block`类：```html<div class="d-none d-sm-block">在小屏幕设备上隐藏该元素</div>```3. 按钮Bootstrap提供了丰富的按钮样式，可以轻松地创建不同风格的按钮。

以下是一个简单的例子：```html<button type="button" class="btn btn-primary">Primary按钮</button><button type="button" class="btn btn-secondary">Secondary按钮</button>```4. 表格使用Bootstrap可以轻松创建各种样式的表格。

Bootstrap 导航栏

Bootstrap 导航栏导航栏是一个很好的功能，是Bootstrap 网站的一个突出特点。

导航栏在您的应用或网站中作为导航页头的响应式基础组件。

导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。

在Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏创建一个默认的导航栏的步骤如下：向<nav> 标签添加class .navbar、.navbar-default。

向上面的元素添加role="navigation"，有助于增加可访问性。

向<div> 元素添加一个标题class .navbar-header，内部包含了带有class navbar-brand 的<a> 元素。

这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有class .nav、.navbar-nav 的无序列表即可。

下面的实例演示了这点：<!DOCTYPE html><html><head><title>Bootstrap 实例- 默认的导航栏</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="#">W3Cschool</a></div><div><ul class="nav navbar-nav"><li class="active"><a href="#">iOS</a></li><li><a href="#">SVN</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></nav></body></html>尝试一下»结果如下所示：默认的导航栏响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有classes .collapse、.navbar-collapse 的<div> 中。

Bootstrap3基础教程03导航栏

Bootstrap3基础教程03导航栏Bootstrap导航栏创建⼀个默认的导航栏的步骤如下：1.向 <nav> 标签添加 class .navbar、.navbar-default。

2.向上⾯的元素添加 role="navigation"，有助于增加可访问性。

3.向 <div> 元素添加⼀个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。

这会让⽂本看起来更⼤⼀号。

（⼿机端的导航按钮放在这⾥，然后通过⼀个容器隐藏导航项）4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的⽆序列表即可。

（⽤⼀个class containter 包裹导航居中）<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/><link href="Script/Style.css" rel="stylesheet"/><title></title></head><body><div class="container"><nav class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-header"><a href="#" class="nav navbar-brand"><strong>logo</strong></a><button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#target"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse " id="target"><ul class="nav navbar-nav"><li class="active"><a href="#">课程</a></li><li><a href="#">博客</a></li><li><a href="#">⼿册</a></li></ul></div></nav></div><script src="Script/2.1.1jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script></body></html>响应式的导航栏1.将要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中.2.折叠起来的导航栏实际上是⼀个带有 class .navbar-toggle 及两个 data- 元素的按钮。

BootstrapCSS组件之导航条（navbar）

BootstrapCSS组件之导航条（navbar）本⽂主要⼤家分享了响应式导航条的具体代码，供⼤家参考，具体内容如下1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form3.导航条中的按钮，⽂本，链接navbar-btn、bavbar-text、navbar-link4.导航条中的项⽬进⾏左右浮动navbar-left、navbar-right5.顶部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom6.响应式导航条<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template</title><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head><body><!-- 基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav创建⼀个默认的导航栏的步骤如下：1.向 <nav> 标签添加 class .navbar、.navbar-default2.向上⾯的元素添加 role="navigation"，有助于增加可访问性。

BootStrap入门教程

本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。

BootStrap入门教程(一)2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。

Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。

大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。

如下图所示：https:///http://www.fleetio.co m/GitHub上这样介绍bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。

基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。

本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding.Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。

我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:<!DOCTYPE html><html lang="en"> ...</html>2同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。

Bootstrap4导航菜单及下拉菜单制作

Bootstrap4导航菜单及下拉菜单制作Bootstrap是一个开源的前端框架，为我们提供了丰富的组件和工具，可以帮助我们快速构建现代化的网页设计。

其中，导航菜单和下拉菜单是网页中常见的元素，本文将介绍如何利用Bootstrap4来制作导航菜单及下拉菜单。

一、创建基础导航菜单在使用Bootstrap4制作导航菜单之前，我们需要先引入Bootstrap的相关资源文件，包括bootstrap.min.css和bootstrap.min.js。

接下来，我们可以利用以下代码创建一个简单的导航菜单：<div class="navbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于我们</a></li><li class="nav-item"><a class="nav-link" href="#">产品展示</a></li><li class="nav-item"><a class="nav-link" href="#">联系我们</a></li></ul></div>以上代码中，我们使用了Bootstrap提供的.navbar和.navbar-nav类来设置导航菜单的基本样式，每个菜单项使用.nav-item类，链接文字使用.nav-link类。

Bootstrap教程第二课：制作网站导航条

Bootstrap教程第二课：制作网站导航条上一课介绍了用Bootstrap前端框架制作一个简易的主页，其中介绍了使用Bootstrap框架所需要的准备工作，以及文档格式要求，在这里及以后将不再复述，如有不明白的地方，可以查看上一节的内容（Bootstrap教程第一课：简单的Bootstrap主页（1））。

制作网站的导航条，先从导航开始，导航的结构代码很简单，如下：<ul class="nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>添加了.nav样式的导航，将会像如下图样显示：要把这个导航变成网站的横排导航条，需要继续给 ul 添加 .navbar-nav 样式，代码如下：<ul class="nav navbar-nav"><li><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul>显示结果如下：导航的栏目默认提供了两种，一种是.navbar-default 默认样式，另一种是 .navbar-inverse 黑色底色样式，我们可以分别给上面的ul外层添加一个DIV，然后加入两个样式，同时还要给这个DIV添加 .navbar 导航条样式，并给导航中的li添加当前高亮样式.active，代码如下：<div class="navbar navbar-default"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li><li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div>navbar-default样式如下：navbar-inverse样式如下：接下来，我们需要给导航添加自适应的导航隐藏展开按钮，同时给导航添加一个文字LOGO，代码如下：<div class="navbar navbar-inverse"><div class="navbar-header"><button type="button" class="navbar-togglecollapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="">首页</a></li> <li><a href="">博文</a></li><li><a href="">留言</a></li></ul></div></div>导航条隐藏时显示效果如下：导航条显示时如下：接着，我们可以在导航后面添加一个搜索框，搜索框代码添加在</ul>下面，代码如下：<form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control"placeholder="Search"></div><button type="submit" class="btnbtn-default">Submit</button></form>效果如下：我们还可以在导航上添加右边的功能导航，这个代码添加在刚刚添加的form表单后面，代码如下：<ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>显示效果如下：最后，在导航中添加一个下拉菜单功能，我们可以把这个代码添加在留言的后面，代码如下：<li class="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown">下拉菜单 <spanclass="caret"></span></a><ul class="dropdown-menu" role="menu"><li><a href="#">导航一</a></li><li><a href="#">导航二</a></li><li><a href="#">导航三</a></li></ul></li>显示效果：一个完整的带有LOGO、主导航、功能导航、搜索框、下拉菜单的导航条就制作完成了，下面贴出完整的代码供大家参考，Bootstrap很强大，需要大家在实践中去学习，所以，简单的复制粘贴，很快就能见到效果，但不如手写一篇来得印象深刻。

bootstrap导航栏模板

bootstrap导航栏模板Bootstrap是一个流行的前端框架，它为开发者提供了快速构建美观、响应式网页的工具和组件。

其中，导航栏是一个常用的控件，可以帮助用户方便地浏览网站的内容。

本文将介绍一些Bootstrap导航栏的模板，帮助你快速构建吸引人的网站。

1. 基本的导航栏基本的导航栏通常在页面的顶部，包含了网站的品牌、主要的菜单链接和一些附加元素（如搜索框和登录按钮）。

以下是一个基本的Bootstrap导航栏模板：```<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">My Site</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">About Us</a></li><li class="nav-item"><a class="nav-link" href="#">Products</a></li><li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li></ul></div></nav>```在这个模板中，`navbar`类表示一个导航栏，`navbar-brand`类表示网站的品牌名称，`navbar-toggler`类是一个响应式的按钮，可以在小屏幕上切换菜单的显示和隐藏。

Bootstrap每天必学之导航

Bootstrap每天必学之导航1、导航（基础样式）导航对于⼀位前端⼈员来说并不陌⽣。

可以说导航是⼀个⽹站重要的元素组件之⼀，可以便于⽤户查找⽹站所提供的各项功能服务。

导航的制作⽅法也是千奇百怪，五花⼋门。

在这⼀节中将向⼤家介绍如何使⽤Bootstrap框架制作各式各样的导航。

在Bootstrap框架将导航独⽴出来成为⼀个导航组件，根据不同的版本，可以找到对应的源码：☑ LESS版本：对应的源⽂件是navs.less☑ Sass版本：对应的源⽂件是_navs.scss☑编译后版本：对应源码是bootstrap.css⽂件第3450⾏～第3641⾏导航基础样式Bootstrap框架中制作导航条主要通过“.nav”样式。

默认的“.nav”样式不提供默认的导航样式，必须附加另外⼀个样式才会有效，⽐如“nav-tabs”、“nav-pills”之类。

⽐如⼀个tab导航条的例⼦，他的实现⽅法就是为ul标签加⼊.nav和nav-tabs两个类样式。

<ul class="nav nav-tabs"><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>/源码请查阅bootstrap.css⽂件第3450⾏~第3493⾏/.nav {padding-left: 0;margin-bottom: 0;list-style: none;}.nav> li {position: relative;display: block;}.nav> li > a {position: relative;display: block;padding: 10px 15px;}.nav> li >a:hover,.nav> li >a:focus {text-decoration: none;background-color: #eee;}.nav>li.disabled> a {color: #999;}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus {color: #999;text-decoration: none;cursor: not-allowed;background-color: transparent;}.nav .open > a,.nav .open >a:hover,.nav .open >a:focus {background-color: #eee;border-color: #428bca;}.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}.nav> li > a >img {max-width: none;}2、导航（标签形tab导航）标签形导航，也称为选项卡导航。

JS组件Bootstrap导航条使用方法详解

JS 组件Bootstrap 导航条使⽤⽅法详解导航条是在您的应⽤或⽹站中作为导航标头的响应式元组件。

导航条在移动设备上可以折叠（并且可开可关），且在可⽤的视⼝宽度增加时变为⽔平展开模式根据你所放在导航条上的内容的长度，也许你需要调整导航条进⼊折叠模式和⽔平模式的阈值。

通过改变@grid-float-breakpoint 变量的值或加⼊您⾃⼰的媒体查询CSS 代码均可实现你的需求。

1<nav class="navbar navbar-default" role="navigation"></nav>效果：12345678910<nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button><a href="#" class="navbar-brand">品牌</a></div> </nav>按钮标签⾥嵌套了三个span 的icon 。

BootStrap学习（3）_导航菜单

BootStrap学习（3）_导航菜单⼀、导航元素1.表格导航或标签以⼀个带有 class .nav 的⽆序列表开始。

添加 class .nav-tabs。

<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><link href="/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/><script src="/libs/jquery/2.0.0/jquery.min.js"></script><script src="/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;"><p>标签式的导航菜单</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#"></a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul></body></html>效果:2.胶囊式的导航菜单如果需要把标签改成胶囊的样式，只需要使⽤ class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上⾯相同。

BootStrap侧边导航栏

BootStrap侧边导航栏<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><link href="../css/bootstrap.css" rel="stylesheet"> <style type="text/css">.bs-docs-sidenav.affix {top: 40px;}/* >表示第一个子元素 */.bs-docs-sidenav > li:first-child > a {-webkit-border-radius: 6px 6px 0 0;-moz-border-radius: 6px 6px 0 0;border-radius: 6px 6px 0 0;}.bs-docs-sidenav > li > a {display: block;width: 190px \9;margin: 0 0 -1px;padding: 8px 14px;border: 1px solid #e5e5e5;}.bs-docs-sidenav {width: 228px;margin: 30px 0 0;padding: 0;background-color: #fff;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);box-shadow: 0 1px 4px rgba(0,0,0,.065);}.bs-docs-sidenav .icon-chevron-right {float: right;margin-top: 2px;margin-right: -6px;opacity: .25;}</style><script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script><script src="../js/bootstrap.js" type="text/javascript"></script></head><body><ul class="nav nav-list bs-docs-sidenav affix-top"><li class="active"><a href="#overview"><i class="icon-chevron-right"></i> 概览</a></li><li class=""><a href="#transitions"><i class="icon-chevron-right"></i> 过渡效果</a></li><li class=""><a href="#modals"><i class="icon-chevron-right"></i> 模态对话框</a></li><li class=""><a href="#dropdowns"><i class="icon-chevron-right"></i> 下拉菜单</a></li><li><a href="#scrollspy"><i class="icon-chevron-right"></i> 滚动监听</a></li><li class=""><a href="#tabs"><i class="icon-chevron-right"></i> 标签页</a></li><li class=""><a href="#tooltips"><i class="icon-chevron-right"></i> 工具提示</a></li><li class=""><a href="#popovers"><i class="icon-chevron-right"></i> 弹出提示</a></li><li class=""><a href="#alerts"><i class="icon-chevron-right"></i> 警告框</a></li><li class=""><a href="#buttons"><i class="icon-chevron-right"></i> 按钮</a></li><li class=""><a href="#collapse"><i class="icon-chevron-right"></i> Collapse</a></li><li class=""><a href="#carousel"><i class="icon-chevron-right"></i> 轮播</a></li><li class=""><a href="#typeahead"><i class="icon-chevron-right"></i> 输入提示</a></li><li class=""><a href="#affix"><i class="icon-chevron-right"></i> 附加导航</a></li></ul><script type="text/javascript">$(function() {$('.nav li').click(function(e) {$('.nav li').removeClass('active');//$(e.target).addClass('active');$(this).addClass('active');});});</script></body> </html>。

Bootstrap4（17）：导航

Bootstrap4（17）：导航⼀、创建导航栏如果你想创建⼀个简单的⽔平导航栏，可以在元素上添加 .nav类，在每个选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:<ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>导航居中<ul class="nav justify-content-center">导航右对齐<ul class="nav justify-content-end"></div>三、垂直导航.flex-column 类⽤于创建垂直导航：<ul class="nav flex-column">四、选项卡使⽤ .nav-tabs 类可以将导航转化为选项卡。

02.bootstrap导航栏居中

02.bootstrap导航栏居中<div id="nav" class="container ys-nav-expand-flex"><div class="navbar navbar-expand-sm"><a href="#" class="navbar-brand" style="font-size: 42px">HONDA</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ns" aria-controls="ns" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="ns"><ul class="navbar-nav mr-auto"><li class="nav-item mx-3 text-white fa-circle">Home</li><li class="mx-3 text-white">Models</li><li class="mx-3 text-white">Journalism</li><li class="mx-3 text-white">Activities</li><li class="mx-3 text-white">Download wallpaper</li></ul></div></div></div>#nav {background-color: #e12241;}.navbar-toggler:not(:disabled):not(.disabled) {border: 1px solid rgba(255, 255, 255, 0.8);}/* @media (max-width: 576px) { <=576的设备 }*/当屏幕宽度⼤于576时，改变 .navbar 为display: inline-flex，再设置text-align:center;使导航栏居中注意：要把这些设置放在@media (min-width: 576px) ⾥⾯，若是把设置放在@media (min-width: 576px)外⾯：当屏幕尺⼨变⼩(⼩于 576)时，⽹页标题和导航栏按钮将会紧凑的居中在页⾯，影响美观。

Bootstrap 导航栏总结

反色的导航栏
• 为了创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可
• 为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。
固定到底部
• 如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。
固定到底部实例
静态的顶部
• 如需创建能随着页面一起滚动的导航栏，请添加 .navbar-statictop class。该 class 不要求向 <body> 添加内边距（padding）。
• 不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。
导航栏中的按钮实例
导航栏中的文本
• 如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。
• 如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixedtop。
• 为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。
固定到顶部实例
</div>
•<ຫໍສະໝຸດ utton type="submit" class="btn btn-default">提交</button>

使用附加导航_Bootstrap入门经典_[共2页]

210 第16章附加导航、选项卡和滚动监听16.1.1使用附加导航要使用Affix插件，您首先必须在HTML文档的最后包含jQuery和affix.js文件。

如果包含完整的Bootstrap JavaScript文件，将包含Affix插件。

然后，您必须将要固定的元素放在文档中，这如同在文档中放置HTML那样简单，您也可以使用CSS精确定位。

最后，为该元素添加data-spy="affix"属性。

在几种浏览器和设备中测试页面。

记住，该页面的长度必须足以滚动，这样Affix插件才能生效。

代码清单16-1展示了固定在页面顶端的导航列表所用的HTML。

代码清单16-1固定页内导航<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap Modal Windows</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><div class="container"><nav class="col-md-4"><ul class="list-group" data-spy="affix"><li class="list-group-item"><a href="#section1">Section One</a></li><li class="list-group-item"><a href="#section2">Section Two</a></li>。

Bootstrap实现导航栏的2种方式

Bootstrap实现导航栏的2种⽅式前⾔：导航是⼀个⽹站重要的元素组件之⼀，可以便于⽤户查找⽹站所提供的各项功能服务。

导航的制作⽅法也是千奇百怪，五花⼋门。

在下⾯的内容中，介绍两种制作导航栏的⽅式。

⼀、⽤按钮组实现，代码如下：<div style="width:100%; background:#ff0"><div class="btn-group"><button class="btn btn-default" type="button">⾸页</button><button class="btn btn-default" type="button">产品展⽰</button><button class="btn btn-default" type="button">案例分析</button><button class="btn btn-default" type="button">联系我们</button><div class="btn-group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">公司简介</a></li><li><a href="#">企业⽂化</a></li><li><a href="#">组织结构</a></li><li><a href="#">客服服务</a></li></ul></div></div></div>⼆、Bootstrap为导航专门做了相应的css类，代码如下：<div style="width:100%; background:#ff0"><ul class="nav nav-pills nav-justified"><li><a href="##">⾸页</a></li><li><a href="##">联系我们</a></li><li><a href="##">产品展⽰</a></li><li class="dropdown"><a href="##" class="dropdown-toggle" data-toggle="dropdown">关于我们<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">公司简介</a></li><li><a href="#">企业⽂化</a></li><li><a href="#">组织结构</a></li><li><a href="#">客服服务</a></li></ul></li></ul></div>如果想要将导航栏设为垂直显⽰，第⼀中⽅法在div.btn-group后追加.btn-group-vertical就可以，第⼆种在div.nav后追加.nav-stacked即可。

bootstrap4折叠导航栏

bootstrap4折叠导航栏通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与data-target="#thetarget" 类。

然后在设置了 class="collapse navbar-collapse" 类的div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id: <nav class="navbar navbar-expand-md bg-dark navbar-dark"><a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler"type="button"data-toggle="collapse"data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link"href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul></div></nav>。