面包屑用于显示网站层次结构中当前页面的位置。面包屑是指示用户在网站中的位置的导航方案。Bootstrap的breadcrumb组件有一个简单的标记并且可以在您的网站的任何地方使用。&!DOCTYPE html&
&html lang=&en&&
&link rel=&stylesheet&
href=&/bootstrap/3.2.0/css/bootstrap.min.css&&
&link rel=&stylesheet&
href=&/bootstrap/3.2.0/css/bootstrap-theme.min.css&&
src=&/ajax/libs/jquery/1.11.1/jquery.min.js&&&/script&
src=&/bootstrap/3.2.0/js/bootstrap.min.js&&&/script&
&body style=&margin:30px&&
&ol class=&breadcrumb&&
href=&#&&Home&/a&&/li&
href=&#&&About&/a&&/li&
&li class=&active&&Author&/li&
微信号：w3cschoolcn
意见反馈：
联系方式：AngularJS Bootstrap详细介绍及实例代码
字体：[ ] 类型：转载 时间：
本文主要介绍AngularJS Bootstrap,这两对AngularJS Bootstrap的基础知识做了详细讲解,并提供简单示例,有需要的小伙伴可以参考下
AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 &head&元素中添加如下代码:
&link rel="stylesheet" href="///bootstrap/3.3.4/css/bootstrap.min.css"&
如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：
&link rel="stylesheet" href="///libs/bootstrap/3.3.4/css/bootstrap.min.css"&
以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。
&!DOCTYPE html&
&meta charset="utf-8"&
&link rel="stylesheet" href="///libs/bootstrap/3.3.4/css/bootstrap.min.css"&
&script src="/libs/angular.js/1.4.6/angular.min.js"&&/script&
&body ng-app="myApp" ng-controller="userCtrl"&
&div class="container"&
&h3&Users&/h3&
&table class="table table-striped"&
&th&编辑&/th&
&th&名&/th&
&th&姓&/th&
&tr ng-repeat="user in users"&
&button class="btn" ng-click="editUser(user.id)"&
&span class="glyphicon glyphicon-pencil"&&/span&编辑
&td&{{ user.fName }}&/td&
&td&{{ user.lName }}&/td&
&button class="btn btn-success" ng-click="editUser('new')"&
&span class="glyphicon glyphicon-user"&&/span&创建新用户
&h3 ng-show="edit"&创建新用户:&/h3&
&h3 ng-hide="edit"&编辑用户:&/h3&
&form class="form-horizontal"&
&div class="form-group"&
&label class="col-sm-2 control-label"&名:&/label&
&div class="col-sm-10"&
&input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"&
&div class="form-group"&
&label class="col-sm-2 control-label"&姓:&/label&
&div class="col-sm-10"&
&input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"&
&div class="form-group"&
&label class="col-sm-2 control-label"&密码:&/label&
&div class="col-sm-10"&
&input type="password" ng-model="passw1" placeholder="密码"&
&div class="form-group"&
&label class="col-sm-2 control-label"&重复密码:&/label&
&div class="col-sm-10"&
&input type="password" ng-model="passw2" placeholder="重复密码"&
&button class="btn btn-success" ng-disabled="error || incomplete"&
&span class="glyphicon glyphicon-save"&&/span&修改
&script src="myUsers.js"&&/script&
运行结果：
AngularJS 指令
&html ng-app
为 &html& 元素定义一个应用(未命名)
&body ng-controller
为 &body& 元素定义一个控制器
&tr ng-repeat
循环 users 对象数组，每个 user 对象放在 &tr& 元素中。
&button ng-click
当点击 &button& 元素时调用函数 editUser()
&h3 ng-show
如果 edit = true 显示 &h3& 元素
&h3 ng-hide
如果 edit = true 隐藏 &h3& 元素
&input ng-model
为应用程序绑定 &input& 元素
&button ng-disabled
如果发生错误或者 ncomplete = true 禁用 &button& 元素
Bootstrap 类解析
Bootstrap 类
table-striped
带条纹背景的表格
btn-success
glyphicon-pencil
glyphicon-user
glyphicon-save
form-horizontal
form-group
control-label
控制器标签
跨越 10 列
JavaScript 代码
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
$scope.edit =
$scope.error =
$scope.incomplete =
$scope.editUser = function(id) {
if (id == 'new') {
$scope.edit =
$scope.incomplete =
$scope.fName = '';
$scope.lName = '';
$scope.edit =
$scope.fName = $scope.users[id-1].fN
$scope.lName = $scope.users[id-1].lN
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error =
$scope.error =
$scope.incomplete =
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete =
JavaScript 代码解析
Scope 属性
$scope.fName
模型变量 (用户名)
$scope.lName
模型变量 (用户姓)
$scope.passw1
模型变量 (用户密码 1)
$scope.passw2
模型变量 (用户密码 2)
$scope.users
模型变量 (用户的数组)
$scope.edit
当用户点击创建用户时设置为true。
$scope.error
如果 passw1 不等于 passw2 设置为 true
$scope.incomplete
如果每个字段都为空(length = 0)设置为 true
$scope.editUser
设置模型变量
$scope.watch
监控模型变量
$scope.test
验证模型变量的错误和完整性
以上就是对AngularJS Bootstrap 资料的整理，后续继续补充，希望能帮助编程AngularJS的同学。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Bootstrap 教程
Bootstrap Modals（模态框）
Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。
在本教程中，将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口。同时，我们也会讨论用于定制的各种可用选项。
您需要 Jquery、Bootstrap CSS 和 JavaScript 文件 bootstrap-modal.js。这个 js 文件位于您下载的 Bootstrap 主文件夹中的 js 文件夹内。
Jquery 位于您的 Bootstrap 主文件夹中的 docs & assets & js 下，名为 jquery.js。或者您可以直接访问 /ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
下面的实例演示了 Bootstrap Modals（模态框）长什么样。
下面的实例演示了如何在网页中使用 Bootstrap Modals（模态框）。请注意，您不需要编写任何的 JavaScript 代码。实例后面附有相关的解释。
&div class="container"&
&&&&&h2&使用Bootstrap创建模态框&/h2&
&&&&&div id="example" class="modal hide fade in" style="display: "&
&&&&&&&&&div class="modal-header"&
&&&&&&&&&&&&&a class="close" data-dismiss="modal"&&&/a&
&&&&&&&&&&&&&h3&这是一个模态框标题&/h3&
&&&&&&&&&/div&
&&&&&&&&&div class="modal-body"&
&&&&&&&&&&&&&h4&模态框中的文本&/h4&
&&&&&&&&&&&&&p&你可以在这添加一些文本。&/p&
&&&&&&&&&/div&
&&&&&&&&&div class="modal-footer"&
&&&&&&&&&&&&&a href="#" class="btn btn-success"&唤醒活动&/a&
&&&&&&&&&&&&&a href="#" class="btn" data-dismiss="modal"&关闭&/a&
&&&&&&&&&/div&
&&&&&/div&
&&&&&p&&a data-toggle="modal" href="#example" class="btn btn-primary btn-large"&发动演示模态框&/a&&/p&
&script src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script&
&script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"&&/script&
下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Modals（模态框）。
div id=&example&
分配给相关 div 的 id，id 的值指向后边要实现 modal（模态框）的 JavaScript。
class=&modal hide fade in&
Bootstrap CSS 的四个 class - modal、hide、fade 和 in，用于设置 modal（模态框）的布局。
style=&display:
用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
&div class=&modal-header&&
modal-header 适用于定义模态窗口标题样式的 class。
a class=&close&
CSS class close 用于设置模态窗口关闭按钮的样式。
data-dismiss=&modal&
data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。
class="modal-body"
modal-body 是 Bootstrap 的一个 CSS class，用于设置模态窗口主体的样式。
class="modal-footer"
modal-footer 是 Bootstrap 的一个 CSS class，用于设置模态窗口尾部的样式。
class="btn btn-success"
CSS class btn 和 btn-success 用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap 按钮代替。
class="btn"
Bootstrap CSS 的 按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。
data-dismiss="modal"
HTML5 定制的 data 属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal"
HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。
class="btn btn-primary btn-large"
设置按钮样式，点击该按钮则创建模态窗口。
&script src="/ajax/libs
/jquery/1.7.1/jquery.min.js"&&/script&
引用 Jquery 文件。
&script src="../bootstrap/twitter-bootstrap-v2>
/js/bootstrap-modal.js"&&/script&
引用 bootstrap modal（模态框）的 JS 文件。
您可以使用 JavaScript 来实现 Bootstrap 模态窗口。只需要在您的 JavaScript 中调用 modal() 即可。您的代码如下所示，您可以在 body 结束标签（即 &/body&）前引用它。
$(function ()
{ $("#identifier").modal();
其中 identifier 是一个 Jquery 选择器，用于标识相关的容器元素。接下来，我们来看看 options 都有哪些。
下面是一些通过 modal() 定制模态窗口外观和感观时可能使用到的选项。
backdrop 选项用于包含一个 modal-backdrop 元素。
如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 backdrop 选项赋值为 false，此时就不存在任何的 modal-backdrop。
{ $("#example").modal({backdrop:false});
如果使用 keyboard 选项，当点击 escape 时则关闭模态窗口。它的类型是 boolean，默认值是 true。如果把 keyboard 选项的值设置为 false，此时即使点击 escape 也不会关闭模态窗口。
如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 keyboard 选项赋值为 false，此时点击 escape 则不会关闭模态窗口。
{ $("#example").modal({keyboard:false});
如果使用 show 选项，当初始化的时候则会显示模态窗口。它的类型是 boolean，默认值是 true。如果把 show 选项的值设置为 false，在初始化时不会显示模态窗口。
如果您把"使用 JavaScript"实例中行号 2 的代码替换为下面的代码，即给 show 选项赋值为 false，在初始化时不会显示模态窗口。
{ $("#example").modal({show:false});
下面是一些通过 modal() 使用到的方法。
该方法把内容激活为一个 modal（模态框）。您可以引用一个可选的 object 类型的 options 参数。如果您在本教程的中的 &/body& 标签前添加下面的代码，此时就不存在任何的 modal（模态框） backdrop 元素。
$('#example').modal({
backdrop: false
该方法手动切换一个 modal（模态框）。如果您在本教程的中的 &/body& 标签前添加下面的代码，即可手动切换 modal（模态框）。
$('#example').modal('toggle')
该方法可用于手动打开一个 modal（模态框）。如果您在本教程的中的 &/body& 标签前添加下面的代码，即可手动打开 modal（模态框）。
$('#example').modal('show')
该方法可用于手动隐藏一个 modal（模态框）。如果您在本教程的中的 &/body& 标签前添加下面的代码，即可手动隐藏 modal（模态框）。
$('#example').modal('hide')
下面是 Modals（模态框）相关的事件。这些事件用于截获并执行自己的代码。
当 show 实例方法被调用之后，此事件被立即触发。
当模态框显示出来之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
当 hide 实例方法被调用之后，此事件被立即触发。Immediately after the hide instance method has been called, this event is called.
当模态框向用户隐藏之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码3314人阅读
& & & & 导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。1、默认的导航栏创建一个默认的导航栏的步骤如下：向 &nav& 标签添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）向上面的元素添加 role=&navigation&，有助于增加可访问性。向 &div& 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 &a& 元素。这会让文本看起来更大一号。为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。下面的实例演示了这点：&!DOCTYPE html&
&title&Bootstrap 实例 - 默认的导航栏&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-inverse& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&林炳文在此～&/a&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&导航一&/a&&/li&
&li&&a href=&#&&导航二&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&我是谁呢？&/a&&/li&
&li&&a href=&#&&我也不知道&/a&&/li&
&li&&a href=&#&&你是谁呢？&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&分离的链接&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&另一个分离的链接&/a&&/li&
&/html&效果如下：把&nav class=&navbar navbar-inverse& role=&navigation&&改成&nav class=&navbar navbar-default& role=&navigation&&效果如下：2、响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 &div& 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 &span& 创建所谓的汉堡按钮。这些会切换为 .nav-collapse &div& 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。下面的实例演示了这点：&!DOCTYPE html&
&title&Bootstrap 实例 - 响应式的导航栏&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-default& role=&navigation&&
&div class=&navbar-header&&
&button type=&button& class=&navbar-toggle& data-toggle=&collapse&
data-target=&#example-navbar-collapse&&
&span class=&sr-only&&切换导航&/span&
&span class=&icon-bar&&&/span&
&span class=&icon-bar&&&/span&
&span class=&icon-bar&&&/span&
&a class=&navbar-brand& href=&#&&12345&/a&
&div class=&collapse navbar-collapse& id=&example-navbar-collapse&&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&iOS&/a&&/li&
&li&&a href=&#&&fgghh&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
Java &b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&vgghhr&/a&&/li&
&li&&a href=&#&&dg&/a&&/li&
&li&&a href=&#&&sfg&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&分离的链接&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&另一个分离的链接&/a&&/li&
&/html&3、导航栏中的表单导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。下面的实例演示了这点：&!DOCTYPE html&
&title&Bootstrap 实例 - 默认的导航栏&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-default& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&林炳文在此～&/a&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&导航一&/a&&/li&
&li&&a href=&#&&导航二&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&我是谁呢？&/a&&/li&
&li&&a href=&#&&我也不知道&/a&&/li&
&li&&a href=&#&&你是谁呢？&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&分离的链接&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&另一个分离的链接&/a&&/li&
&form class=&navbar-form navbar-left& role=&search&&
&div class=&form-group&&
&input type=&text& class=&form-control& placeholder=&Search&&
&button type=&submit& class=&btn btn-default&&搜一下&/button&
&/html&效果：黑色效果4、导航栏中的按钮您可以使用 class .navbar-btn 向不在 &form& 中的 &button& 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 &a& 和 &input& 元素上。不要在 .navbar-nav 内的 &a& 元素上使用 .navbar-btn，因为它不是标准的 button class。下面的实例演示了这点：&!DOCTYPE html&
&title&Bootstrap 实例 - 默认的导航栏&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-inverse& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&林炳文在此～&/a&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&导航一&/a&&/li&
&li&&a href=&#&&导航二&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&我是谁呢？&/a&&/li&
&li&&a href=&#&&我也不知道&/a&&/li&
&li&&a href=&#&&你是谁呢？&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&分离的链接&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&另一个分离的链接&/a&&/li&
&form class=&navbar-form navbar-left& role=&search&&
&div class=&form-group&&
&input type=&text& class=&form-control& placeholder=&Search&&
&button type=&submit& class=&btn btn-default&&搜一下&/button&
&button type=&button& class=&btn btn-default navbar-btn&&
导航栏按钮
&/html&5、导航栏中的文本如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 &p& 标签一起使用，确保适当的前导和颜色。下面的实例演示了这点：&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&林炳文在此～&/a&
&p class=&navbar-text&&导航栏中的文本&/p&
&div&效果如下：6、非导航链接如果您不想在常规的导航栏导航组件内使用标准的链接，那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色，如下面的实例所示：&!DOCTYPE html&
&title&Bootstrap 实例 - 默认的导航栏&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-inverse& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&林炳文在此～&/a&
&p class=&navbar-text&&导航栏中的文本&/p&
&p class=&navbar-text navbar-right&&我在
&a href=&#& class=&navbar-link&&右边&/a&
&ul class=&nav navbar-nav&&
&li class=&active&&&a href=&#&&导航一&/a&&/li&
&li&&a href=&#&&导航二&/a&&/li&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&我是谁呢？&/a&&/li&
&li&&a href=&#&&我也不知道&/a&&/li&
&li&&a href=&#&&你是谁呢？&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&分离的链接&/a&&/li&
&li class=&divider&&&/li&
&li&&a href=&#&&另一个分离的链接&/a&&/li&
&form class=&navbar-form navbar-left& role=&search&&
&div class=&form-group&&
&input type=&text& class=&form-control& placeholder=&Search&&
&button type=&submit& class=&btn btn-default&&搜一下&/button&
&button type=&button& class=&btn btn-default navbar-btn&&
导航栏按钮
&/html&7、组件对齐方式您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。下面的实例演示了这点：&!DOCTYPE html&
&title&Bootstrap 实例 - 组件对齐方式&/title&
&link href=&bootstrap.min.css& rel=&stylesheet&&
&script src=&jquery-2.1.4.min.js&&&/script&
&script src=&bootstrap.min.js&&&/script&
&nav class=&navbar navbar-inverse& role=&navigation&&
&div class=&navbar-header&&
&a class=&navbar-brand& href=&#&&我在这里&/a&
&!--向左对齐--&
&ul class=&nav navbar-nav navbar-left&&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
&b class=&caret&&&/b&
&ul class=&dropdown-menu&&
&li&&a href=&#&&什么人&/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&
&form class=&navbar-form navbar-left& role=&search&&
&button type=&submit& class=&btn btn-default&&
向左对齐-提交按钮
&p class=&navbar-text navbar-left&&向左对齐-文本&/p&
&!--向右对齐--&
&ul class=&nav navbar-nav navbar-right&&
&li class=&dropdown&&
&a href=&#& class=&dropdown-toggle& data-toggle=&dropdown&&
Java &b class=&caret&&&/b&
&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&
&form class=&navbar-form navbar-right& role=&search&&
&button type=&submit& class=&btn btn-default&&
向右对齐-提交按钮
&p class=&navbar-text navbar-right&&向右对齐-文本&/p&
&/html&8、固定到顶部Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：&nav class=&navbar navbar-default navbar-fixed-top& role=&navigation&&为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 &body& 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。9、固定到底部如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。下面的实例演示了这点：如：&nav class=&navbar navbar-default navbar-fixed-bottom& role=&navigation&&10、静态的顶部如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 &body& 添加内边距（padding）。&nav class=&navbar navbar-default navbar-static-top& role=&navigation&&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1022277次
积分：13034
积分：13034
排名：第768名
原创：240篇
评论：1050条
阅读：26528
阅读：47419
文章：13篇
阅读：55347
文章：18篇
阅读：82395
文章：23篇
阅读：195423
(1)(10)(4)(10)(10)(1)(6)(4)(6)(3)(12)(10)(11)(12)(14)(21)(28)(13)(16)(15)(4)(2)(13)(16)(2)(1)