Bootstrap 输入框组、...
请问 我需要设置顶部导航条和底部导航条两个，颜色要不同，该怎么设置？？
建立两个导航条，然后分别设置两个导航条的css颜色样式，给两个导航做定位处理position，让他们分别在top和bottom即可
Bootstrap 输入框组、...
服务热线:400-678-8266创建一个默认的导航栏的步骤如下：
向 &nav& 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 &div& 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 &a& 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
&!DOCTYPE&html&
&&&&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&
&nav&class="navbar&navbar-default"&role="navigation"&
&&&&div&class="navbar-header"&
&&&&&&&a&class="navbar-brand"&href="#"&W3Cschool&/a&
&&&&&&&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&
&&&&最外层是
&nav&class="navbar&navbar-default"&role="navigation"&
在bootstrap.css中
& position:
& min-height: 50
& margin-bottom: 20
& border: 1
注：transparent是边框颜色的默认值，表示颜色透明。
(min-width: 768px) {
& .navbar {
& & border-radius: 4
查询，参见：http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html
查询，你可以针对不同的媒体类型定义不同的样式。 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面， 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法如下：
@media&mediatype&and|not|only&(media feature)&{&&& CSS-C}
mediatype: all(用于所有设备) 、screen（电脑、平板、手机）、print（打印机和打印机预览）、speech（屏幕阅读器等发声设备）
media feature详见：http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html
@media only screen and (max-width: 500px)&{&&& .gridmenu&{&&&&&&&&width:100%;&&& }&&& .gridmain&{&&&&&&&&width:100%;&&& }&&& .gridright&{&&&&&&&&width:100%;&&& }}
& & display:
.navbar-default {
& background-color: #f8f8f8;
& border-color: #e7e7e7;
然后是整个导航栏的标题
&div&class="navbar-header"&
&&&&&&&a&class="navbar-brand"&href="#"&W3Cschool&/a&
@media (min-width: 768px) {
& .navbar-header {
& & float:
.container & .navbar-header,
.container-fluid & .navbar-header,
.container & .navbar-collapse,
.container-fluid & .navbar-collapse {
& margin-right: -15
& margin-left: -15
@media (min-width: 768px) {
& .container & .navbar-header,
& .container-fluid & .navbar-header,
& .container & .navbar-collapse,
& .container-fluid & .navbar-collapse {
& & margin-right: 0;
& & margin-left: 0;
.navbar-brand {
& height: 50
& padding: 15px 15
& font-size: 18
& line-height: 20
.navbar-brand:hover,
.navbar-brand:focus {
& text-decoration:
@media (min-width: 768px) {
& .navbar & .container .navbar-brand,
& .navbar & .container-fluid .navbar-brand {
& & margin-left: -15
.navbar-default .navbar-brand {
& color: #777;
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
& color: #5e5e5e;
& background-color:
.navbar-inverse .navbar-brand {
& color: #777;
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
& color: #
& background-color:
再然后是导航栏中的项目列表
&ul&class="nav&navbar-nav"&
&&&&&&&&&&li&class="active"&&a&href="#"&iOS&/a&&/li&
& padding-left: 0;
& margin-bottom: 0;
& list-style:
.nav & li {
& position:
& display:
.nav & li & a {
& position:
& display:
& padding: 10px 15
.nav & li & a:hover,
.nav & li & a:focus {
& text-decoration:
& background-color: #
.nav & li.disabled & a {
& color: #777;
.nav & li.disabled & a:hover,
.nav & li.disabled & a:focus {
& color: #777;
& text-decoration:
& cursor: not-
& background-color:
.nav .open & a,
.nav .open & a:hover,
.nav .open & a:focus {
& background-color: #
& border-color: #428
.nav .nav-divider {
& height: 1
& margin: 9px 0;
& overflow:
& background-color: #e5e5e5;
.nav & li & a & img {
& max-width:
.navbar-nav {
& margin: 7.5px -15
.navbar-nav & li & a {
& padding-top: 10
& padding-bottom: 10
& line-height: 20
@media (min-width: 768px) {
& .navbar-nav {
& & float:
& & margin: 0;
.dropdown-menu & .active & a,
.dropdown-menu & .active & a:hover,
.dropdown-menu & .active & a:focus {
& color: #
& text-decoration:
& background-color: #428
& outline: 0;
表示每个具体项目的&li&中，可以添加表单、下拉菜单、按钮等各种元素。原文链接:
阅读排行榜推荐这篇日记的豆列
······青岛seo是网站优化,百度优化,google优化,网络营销,网站建设,网络推广,网络优化,seo网站排名优化外包培训服务公司
Bootstrap导航条教程
作者: &&&&来源: &&&&时间： &&&& 浏览：-
青岛网站建设使用响应式的布局已经势不可挡，青岛网站建设今天分享Bootstrap导航条基础使用方法，供大家参考，具体内容如下1、Bootstrap基础导航样式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&2、Bootstrap基础导航条在制作一个基础导航条时，主要分以下几步：第一步：首先在制作导航的列表(&ul class=”nav”&)基础上添加类名“navbar-nav”第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置&div class=&navbar navbar-default& role=&navigation&&&&ul class=&nav navbar-nav&&&&li class=&active&&&a href=&##&&网站首页&/a&&/li&&&li&&a href=&##&&系列教程&/a&&/li&&&li&&a href=&##&&名师介绍&/a&&/li&&&li&&a href=&##&&成功案例&/a&&/li&&&li&&a href=&##&&关于我们&/a&&/li&&&/ul&&/div&3、Bootstrap导航条添加标题在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现。&div class=&navbar navbar-default& role=&navigation&&&　&div class=&navbar-header&&&　 &a href=&##& class=&navbar-brand&&导航条&/a&&　&/div&&&ul class=&nav navbar-nav&&&&li class=&active&&&a href=&##&&网站首页&/a&&/li&&&li&&a href=&##&&系列教程&/a&&/li&&&li&&a href=&##&&名师介绍&/a&&/li&&&li&&a href=&##&&成功案例&/a&&/li&&&li&&a href=&##&&关于我们&/a&&/li&&&/ul&&/div&4、Bootstrap导航条二级菜单在导航条中添加二级菜单也非常简单&div class=&navbar navbar-default& role=&navigation&&&　&div class=&navbar-header&&&　 &a href=&##& class=&navbar-brand&&导航条&/a&&　&/div&&&ul class=&nav navbar-nav&&&&li class=&active&&&a href=&##&&网站首页&/a&&/li&&&li class=&dropdown&&&&a href=&##& data-toggle=&dropdown& class=&dropdown-toggle&&系列教程&span class=&caret&&&/span&&/a&&&ul class=&dropdown-menu&&&&li&&a href=&##&&CSS3&/a&&/li&&&li&&a href=&##&&JavaScript&/a&&/li&&&li class=&disabled&&&a href=&##&&PHP&/a&&/li&&&/ul&&&/li&&&li&&a href=&##&&名师介绍&/a&&/li&&&li&&a href=&##&&成功案例&/a&&/li&&&li&&a href=&##&&关于我们&/a&&/li&&&/ul&&/div&5、Bootstrap带表单的导航条有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。&div class=&navbar navbar-default& role=&navigation&&&　&div class=&navbar-header&&&　 &a href=&##& class=&navbar-brand&&Bootstrap&/a&&　&/div&&&ul class=&nav navbar-nav&&&&li class=&active&&&a href=&##&&网站首页&/a&&/li&&&li class=&dropdown&&&&a href=&##& data-toggle=&dropdown& class=&dropdown-toggle&&系列教程&span class=&caret&&&/span&&/a&&&ul class=&dropdown-menu&&&&li&&a href=&##&&CSS3&/a&&/li&&&li&&a href=&##&&JavaScript&/a&&/li&&&li class=&disabled&&&a href=&##&&PHP&/a&&/li&&&/ul&&&/li&&&li&&a href=&##&&名师介绍&/a&&/li&&&li&&a href=&##&&成功案例&/a&&/li&&&li&&a href=&##&&关于我们&/a&&/li&&&/ul&&&form action=&##& class=&navbar-form navbar-left& rol=&search&&&&div class=&form-group&&&&input type=&text& class=&form-control& placeholder=&请输入关键词& /&&&/div&&&button type=&submit& class=&btn btn-default&&搜索&/button&&&/form&&/div&6、Bootstrap导航条中的按钮、文本和链接Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：1).导航条中的按钮navbar-btn2).导航条中的文本navbar-text3).导航条中的普通链接navbar-link但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。&div class=&navbar navbar-default& role=&navigation&&&　&div class=&navbar-header&&&　 &a href=&##& class=&navbar-brand&&Bootstrap&/a&&　&/div&&&ul class=&nav navbar-nav&&&&li&&a href=&##& class=&navbar-text&&Navbar Text&/a&&/li&&&li&&a href=&##& class=&navbar-text&&Navbar Text&/a&&/li&&&li&&a href=&##& class=&navbar-text&&Navbar Text&/a&&/li&&&/ul&&/div&&div class=&navbar navbar-default& role=&navigation&&&　&div class=&navbar-header&&&　 &a href=&##& class=&navbar-brand&&Bootstrap&/a&&　&/div&&&div class=&nav navbar-nav&&&&a href=&##& class=&navbar-text&&Navbar Text&/a&&&a href=&##& class=&navbar-text&&Navbar Text&/a&&&a href=&##& class=&navbar-text&&Navbar Text&/a&&&/div&&/div&7、Bootstrap固定导航条很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：.navbar-fixed-top：导航条固定在浏览器窗口顶部.navbar-fixed-bottom：导航条固定在浏览器窗口底部&div class=&navbar navbar-default navbar-fixed-top& role=&navigation&&　…&/div&&div class=&content&&我是内容&/div&&div class=&navbar navbar-default navbar-fixed-bottom& role=&navigation&&　…&/div&8、Bootstrap分页导航带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div&a和div&span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul&li&a这样的结构，在ul标签上加入pagination方法。&ul class=&pagination&&&&li&&a href=&#&&<<&/a&&/li&&&li&&a href=&#&&1&/a&&/li&&&li&&a href=&#&&2&/a&&/li&&&li&&a href=&#&&3&/a&&/li&&&li&&a href=&#&&4&/a&&/li&&&li&&a href=&#&&5&/a&&/li&&&li&&a href=&#&&>>&/a&&/li&&/ul&在Bootstrap框架中，也可以通过几个不同的情况来设置分页按钮大小。1).通过“pagination-lg”让分页导航变大；2).通过“pagination-sm”让分页导航变小&ul class=&pagination pagination-lg&&&…&/ul&&ul class=&pagination&&&…&/ul&&ul class=&pagination pagination-sm&&&…&/ul&Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。&ul class=&pager&&&&li&&a href=&#&&<<上一页&/a&&/li&&&li&&a href=&#&&下一页>>&/a&&/li&&/ul&默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式previous：让“上一步”按钮居左next：让“下一步”按钮居右&ul class=&pager&&&&li class=&previous&&&a href=&#&&<<上一页&/a&&/li&&&li class=&next&&&a href=&#&&下一页>>&/a&&/li&&/ul&以上就是青岛网站建设关于Bootstrap 导航条的全部内容，希望对大家的学习有所帮助。
青岛网站优化-热门文章
青岛seo顾问:雪无痕}