• <!Doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,...ti
    <!Doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,user-scaleable=no">
    		<title>响应式表单</title>
    		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
    
    	</head>
    
    	<body>
    
    		<div class="container" style="background:#e6e6e6;">
    			<div>
    				<p>.dropdown-menu 给下拉列表中的内容 给ul 加样式</p>
    				<p>.dropdown包含触发的按钮和下拉列表加样式 -- 父元素</p>
    				<p>data-toggle 按钮的触发器</p>
    				<p>.dropdown-menu-left 下拉列表的对齐 .dropdown-menu-right 下拉列表右对齐</p>
    				<p>.divider 给li标签加,之间没有内容</p>
    			</div>
    			
    			<h3 class="page-header">下拉列表</h3>
    			<div class="dropdown ">
    				<button class="btn btn-default" data-toggle="dropdown">
    					登录<span class="caret"></span>
    				</button>
    				<ul class="dropdown-menu">
    					<li><a href="#">qq登录</a></li>
    					<li las="divider"></li><!--分割线 <li></li>标签中间没有内容-->
    					<li><a href="#">微信登录</a></li>
    					<li><a href="#">手机登录</a></li>
    					<li><a href="#">邮箱登录</a></li>
    					<li><a href="#">微博登录</a></li>
    				</ul>
    			</div>
    
    			<p>.nav是标签页的一个基类,给ul加</p>
    			<p>.nav-tabs普通标签页</p>
    			<p>.nav-pills胶囊式标签页</p>
    			<p>.nav-stacked垂直排列,给ul加</p>
    			<p>.active给li加,默认显示该内容</p>
    
    			<h3 class="page-header">标签页1:普通式</h3>
    			<ul class="nav nav-tabs">
    				<li class="active"><a href="#">home</a></li>
    				<li><a href="#">profile</a></li>
    				<li><a href="#">,essages</a></li>
    			</ul>
    			<h3 class="page-header">标签页2:胶囊式</h3>
    			<ul class="nav nav-pills">
    				<li class="active"><a href="#">home</a></li>
    				<li><a href="#">profile</a></li>
    				<li><a href="#">,essages</a></li>
    			</ul>
    			<h3 class="page-header">标签页3</h3>
    			<ul class="nav nav-pills nav-stacked"><!--纵向的-->
    				<li class="active"><a href="#">home</a></li>
    				<li><a href="#">profile</a></li>
    				<li><a href="#">,essages</a></li>
    			</ul>
    
    			<h3 class="page-header">导航</h3>
    			<p>navbar是导航栏的一个基类,给nav元素加</p>
    			<p>.navbar-default 导航栏默认样式,由于nav元素</p>
    			<p>.container是nav元素的子元素,导航栏内容都放入其中</p>
    			<p>.navbar-header 导航栏头部样式</p>
    			<p>.navbar-inverse 颜色取反</p>
    
    			<p>.collapse是折叠导航栏样式的基类,给ul父元素加<br>
    				.navbar-collapse是折叠导航栏的样式,给ul父元素加<br>
    				.nav是导航栏的链接基类,给ul加<br>
    				.navbar-nav是导航栏的链接样式,给ul加<br>
    				.navbar-left或.navbar-right组件排列,导航链接,按钮或文本对齐<br>
    				.navbar-fixed-top导航栏固定在顶部,用于nav标签,需要为body设置padding-top:70px;<br>
    				.navbar-fixed-bottom导航栏固定在底部,用于nav元素<br>
    			</p>
    
    			<nav class="navbar navbar-default nav-fixed-top navbar-inverse"> 
    				<div class="container text-success">
    					<!--页面的头部-->
    					<div class="navbar-header">
    						<a href="#"><img src="logo.jpg" height="50" width="70"></a>
    					</div>
    					<!--导航链接-->
    					<div class="collapse navbar-collapse">
    						<ul class="nav navbar-nav">
    							<li class="active"><a href="#">home首页</a></li>
    							<li><a href="#">home视频</a></li>
    							<li><a href="#">home内容</a></li>
    							<li><a href="#">home导航</a></li>
    						</ul>
    					</div>
    				</div>
    			</nav>
    			 <!--固定到顶端,.navbar-fixed-bottom固定到底部,颜色取反-->
    				<div class="container">
    					<h3>云计算</h3>
    					<p>s如何简化云服务的交付?11月,英特尔福利大放送,为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心,成用户注册后,<br>即可免费领取云计算精选资源,还有精美礼品可以领取哦</p>
    					<h3>云计算</h3>
    					<p>s如何简化云服务的交付?11月,英特尔福利大放送,为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心,成用户注册后,<br>即可免费领取云计算精选资源,还有精美礼品可以领取哦</p>
    					<h3>云计算</h3>
    					<p>s如何简化云服务的交付?11月,英特尔福利大放送,为您提供用于帮助您<br>简化云路径的资源、用于奠定云环境基础的技术、以及可交付优化云解决方案的领先合作伙伴关系。只要您点击加入英特尔商用中心,成用户注册后,<br>即可免费领取云计算精选资源,还有精美礼品可以领取哦</p>
    					<h3>云计算</h3></p>
    
    				</div>
    
    		</div><!--container-->
    
    	</body>
    </html>
    
    
    

    展开全文
  • Bootstrap导航栏标签页tab 联动问题 分三步: 1.头部移动设备 data-target目标值 #demo-navbar 和 导航栏id值相同 2。标签页设置id=" tab-list" 3.脚本 // 标签页和导航栏联动 $(document).ready...

    Bootstrap导航栏和标签页tab 联动问题

    分三步:

    1.头部移动设备 data-target目标值 #demo-navbar 和 导航栏id值相同

     

    2。标签页设置id=" tab-list"

    3.脚本

    //    标签页和导航栏联动
        $(document).ready(function(){
            $("#demo-navbar .dropdown-menu a").click(function(){
                var href =$(this).attr("href");
                $("#tab-list a[href='" + href +"']").tab("show");
            });
        });

     

    展开全文
  • 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 ...

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。

    1、默认的导航栏
    创建一个默认的导航栏的步骤如下:

    向 <nav> 标签添加 class .navbar、.navbar-default(白底黑字),navbar-inverse(黑底白字)

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

    向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

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

    下面的实例演示了这点:

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-inverse" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <class="navbar-brand" href="#">林炳文在此~</a>  
    14.    </div>  
    15.    <div>  
    16.       <ul class="nav navbar-nav">  
    17.          <li class="active"><href="#">导航一</a></li>  
    18.          <li><href="#">导航二</a></li>  
    19.          <li class="dropdown">  
    20.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    21.                下拉菜单  
    22.                <class="caret"></b>  
    23.             </a>  
    24.             <ul class="dropdown-menu">  
    25.                <li><href="#">我是谁呢?</a></li>  
    26.                <li><href="#">我也不知道</a></li>  
    27.                <li><href="#">你是谁呢?</a></li>  
    28.                <li class="divider"></li>  
    29.                <li><href="#">分离的链接</a></li>  
    30.                <li class="divider"></li>  
    31.                <li><href="#">另一个分离的链接</a></li>  
    32.             </ul>  
    33.          </li>  
    34.       </ul>  
    35.    </div>  
    36. </nav>  
    37.    
    38.    
    39. </body>  
    40. </html>  

     

    效果如下:

     

    [html] view plain copy
     
    1. <nav class="navbar navbar-inverse" role="navigation">  

    改成

     

     

    [html] view plain copy
     
    1. <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)插件。

    下面的实例演示了这点:

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 响应式的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-default" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <button type="button" class="navbar-toggle" data-toggle="collapse"   
    14.          data-target="#example-navbar-collapse">  
    15.          <span class="sr-only">切换导航</span>  
    16.          <span class="icon-bar"></span>  
    17.          <span class="icon-bar"></span>  
    18.          <span class="icon-bar"></span>  
    19.       </button>  
    20.       <class="navbar-brand" href="#">12345</a>  
    21.    </div>  
    22.    <div class="collapse navbar-collapse" id="example-navbar-collapse">  
    23.       <ul class="nav navbar-nav">  
    24.          <li class="active"><href="#">iOS</a></li>  
    25.          <li><href="#">fgghh</a></li>  
    26.          <li class="dropdown">  
    27.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    28.                Java <class="caret"></b>  
    29.             </a>  
    30.             <ul class="dropdown-menu">  
    31.                <li><href="#">vgghhr</a></li>  
    32.                <li><href="#">dg</a></li>  
    33.                <li><href="#">sfg</a></li>  
    34.                <li class="divider"></li>  
    35.                <li><href="#">分离的链接</a></li>  
    36.                <li class="divider"></li>  
    37.                <li><href="#">另一个分离的链接</a></li>  
    38.             </ul>  
    39.          </li>  
    40.       </ul>  
    41.    </div>  
    42. </nav>  
    43.    
    44.    
    45. </body>  
    46. </html>  

     

     


    3、导航栏中的表单
    导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里。

    下面的实例演示了这点:

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-default" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <class="navbar-brand" href="#">林炳文在此~</a>  
    13.    </div>  
    14.    <div>  
    15.       <ul class="nav navbar-nav">  
    16.          <li class="active"><href="#">导航一</a></li>  
    17.          <li><href="#">导航二</a></li>  
    18.          <li class="dropdown">  
    19.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                下拉菜单  
    21.                <class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><href="#">我是谁呢?</a></li>  
    25.                <li><href="#">我也不知道</a></li>  
    26.                <li><href="#">你是谁呢?</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.    </div>  
    35.     <div>  
    36.       <form class="navbar-form navbar-left" role="search">  
    37.          <div class="form-group">  
    38.             <input type="text" class="form-control" placeholder="Search">  
    39.          </div>  
    40.          <button type="submit" class="btn btn-default">搜一下</button>  
    41.       </form>      
    42.    </div>  
    43. </nav>  
    44. </body>  
    45. </html>  


    效果:

     

    黑色效果

     

    4、导航栏中的按钮
    您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮,按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

    不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn,因为它不是标准的 button class。
    下面的实例演示了这点:

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-inverse" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <class="navbar-brand" href="#">林炳文在此~</a>  
    13.    </div>  
    14.    <div>  
    15.       <ul class="nav navbar-nav">  
    16.          <li class="active"><href="#">导航一</a></li>  
    17.          <li><href="#">导航二</a></li>  
    18.          <li class="dropdown">  
    19.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                下拉菜单  
    21.                <class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><href="#">我是谁呢?</a></li>  
    25.                <li><href="#">我也不知道</a></li>  
    26.                <li><href="#">你是谁呢?</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.    </div>  
    35.     <div>  
    36.       <form class="navbar-form navbar-left" role="search">  
    37.          <div class="form-group">  
    38.             <input type="text" class="form-control" placeholder="Search">  
    39.          </div>  
    40.          <button type="submit" class="btn btn-default">搜一下</button>  
    41.       </form>   
    42.       <button type="button" class="btn btn-default navbar-btn">  
    43.          导航栏按钮  
    44.       </button>       
    45.    </div>  
    46. </nav>  
    47. </body>  
    48. </html>  

    5、导航栏中的文本
    如果需要在导航中包含文本字符串,请使用 class .navbar-text。这通常与 <p> 标签一起使用,确保适当的前导和颜色。下面的实例演示了这点:

     

     

    [html] view plain copy
     
    1. <div class="navbar-header">  
    2.       <class="navbar-brand" href="#">林炳文在此~</a>     
    3.    </div>  
    4.    <div>  
    5.       <class="navbar-text">导航栏中的文本</p>  
    6.    </div>  
    7.    <div>  

    效果如下:

     

     

    6、非导航链接
    如果您不想在常规的导航栏导航组件内使用标准的链接,那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色,如下面的实例所示:

     

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-inverse" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <class="navbar-brand" href="#">林炳文在此~</a>     
    13.    </div>  
    14.    <div>  
    15.       <class="navbar-text">导航栏中的文本</p>  
    16.    </div>  
    17.    <div>  
    18.       <class="navbar-text navbar-right">我在   
    19.          <href="#" class="navbar-link">右边</a>  
    20.       </p>  
    21.    </div>  
    22.    <div>  
    23.       <ul class="nav navbar-nav">  
    24.          <li class="active"><href="#">导航一</a></li>  
    25.          <li><href="#">导航二</a></li>  
    26.          <li class="dropdown">  
    27.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    28.                下拉菜单  
    29.                <class="caret"></b>  
    30.             </a>  
    31.             <ul class="dropdown-menu">  
    32.                <li><href="#">我是谁呢?</a></li>  
    33.                <li><href="#">我也不知道</a></li>  
    34.                <li><href="#">你是谁呢?</a></li>  
    35.                <li class="divider"></li>  
    36.                <li><href="#">分离的链接</a></li>  
    37.                <li class="divider"></li>  
    38.                <li><href="#">另一个分离的链接</a></li>  
    39.             </ul>  
    40.          </li>  
    41.       </ul>  
    42.    </div>  
    43.     <div>  
    44.       <form class="navbar-form navbar-left" role="search">  
    45.          <div class="form-group">  
    46.             <input type="text" class="form-control" placeholder="Search">  
    47.          </div>  
    48.          <button type="submit" class="btn btn-default">搜一下</button>  
    49.       </form>   
    50.       <button type="button" class="btn btn-default navbar-btn">  
    51.          导航栏按钮  
    52.       </button>       
    53.    </div>  
    54. </nav>  
    55. </body>  
    56. </html>  


     

    7、组件对齐方式
    您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。下面的实例演示了这点:

     

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 组件对齐方式</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-inverse" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <class="navbar-brand" href="#">我在这里</a>  
    14.    </div>  
    15.    <div>  
    16.       <!--向左对齐-->  
    17.       <ul class="nav navbar-nav navbar-left">  
    18.          <li class="dropdown">  
    19.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                Java   
    21.                <class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><href="#">什么人</a></li>  
    25.                <li><href="#">EJB</a></li>  
    26.                <li><href="#">Jasper Report</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.       <form class="navbar-form navbar-left" role="search">  
    35.          <button type="submit" class="btn btn-default">  
    36.             向左对齐-提交按钮    
    37.          </button>  
    38.       </form>   
    39.       <class="navbar-text navbar-left">向左对齐-文本</p>  
    40.       <!--向右对齐-->  
    41.       <ul class="nav navbar-nav navbar-right">  
    42.          <li class="dropdown">  
    43.             <href="#" class="dropdown-toggle" data-toggle="dropdown">  
    44.                Java <class="caret"></b>  
    45.             </a>  
    46.             <ul class="dropdown-menu">  
    47.                <li><href="#">jmeter</a></li>  
    48.                <li><href="#">EJB</a></li>  
    49.                <li><href="#">Jasper Report</a></li>  
    50.                <li class="divider"></li>  
    51.                <li><href="#">分离的链接</a></li>  
    52.                <li class="divider"></li>  
    53.                <li><href="#">另一个分离的链接</a></li>  
    54.             </ul>  
    55.          </li>  
    56.       </ul>  
    57.       <form class="navbar-form navbar-right" role="search">  
    58.          <button type="submit" class="btn btn-default">  
    59.             向右对齐-提交按钮  
    60.          </button>  
    61.       </form>   
    62.       <class="navbar-text navbar-right">向右对齐-文本</p>  
    63.    </div>  
    64. </nav>  
    65.    
    66. </body>  
    67. </html>  


    8、固定到顶部
    Bootstrap 导航栏可以动态定位。默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏。

    如果您想要让导航栏固定在页面的顶部,请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点:

     

     

    [html] view plain copy
     
    1. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  


    为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),内边距的值可以根据您的需要进行设置。

     

    9、固定到底部
    如果您想要让导航栏固定在页面的底部,请向 .navbar class 添加 class .navbar-fixed-bottom。下面的实例演示了这点:

    如:

     

    [html] view plain copy
     
    1. <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  

    10、静态的顶部
    如需创建能随着页面一起滚动的导航栏,请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距(padding)。

     

     

    [html] view plain copy
     
      1. <nav class="navbar navbar-default navbar-static-top" role="navigation">  
    1. // from: http://blog.csdn.net/evankaka/article/details/49516493
    展开全文
  • Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式 默认的导航栏 向 <nav> 标签添加 class .navbar、.navbar-default。 向上面的元素添加 role="navigation",有助于增加可访问性...

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

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

     

    默认的导航栏

    向 <nav> 标签添加 class .navbar、.navbar-default。

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

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

    这会让文本看起来更大一号。 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">首页</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>
        </div>
    </nav>

     

    响应式的导航栏

    折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

    折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

    第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,

    第二个是 data-target,指示要切换到哪一个元素。

    三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

    这些会切换为 .nav-collapse <div> 中的元素。 为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <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>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <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="#">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>
        </div>
    </nav>

     

    导航栏中的表单

    导航栏中的表单不是使用 Bootstrap 表单章节中所讲到的默认的 class,它是使用 .navbar-form class。

    这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。

    使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid"> 
        <div class="navbar-header">
            <a class="navbar-brand" href="#">验证码</a>
        </div>
        <div>
            <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="btn btn-default">提交</button>
            </form>
        </div>
        </div>
    </nav>

     

    导航栏中的按钮

    使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮,按钮在导航栏上垂直居中。

    .navbar-btn 可被使用在 <a> 和 <input> 元素上。

    注意:不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn,因为它不是标准的 button class

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">验证码</a>
        </div>
        <div>
            <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="btn btn-default">提交按钮</button>
            </form>
            <button type="button" class="btn btn-default navbar-btn">
                导航栏按钮
            </button>
        </div>
        </div>
    </nav>

     

    导航栏中的文本

    如果需要在导航中包含文本字符串,请使用 class .navbar-text。 这通常与 <p> 标签一起使用,确保适当的前导和颜色

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Ltesoft</a>
        </div>
        <div>
            <p class="navbar-text">Runoob 用户登录</p>
        </div>
        </div>
    </nav>

     

    结合图标的导航链接

    如果您想在常规的导航栏导航组件内使用图标,那么请使用 class glyphicon glyphicon-* 来设置图标,更多请查看 Bootstrap 图标

    <nav class="navbar navbar-default" role="navigation"> 
        <div class="container-fluid"> 
            <div class="navbar-header"> 
                <a class="navbar-brand" href="#">Ltesoft</a> 
            </div> 
            <ul class="nav navbar-nav navbar-right"> 
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
            </ul> 
        </div> 
    </nav>

     

    组件对齐方式

    使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。

    这两个 class 都会在指定的方向上添加 CSS 浮动

     

     

     

    固定到顶部

    Bootstrap 导航栏可以动态定位。 默认情况下,它是块级元素,它是基于在 HTML 中放置的位置定位的。

    通过一些帮助器类,您可以把它放置在页面的顶部或者底部,或者您可以让它成为随着页面一起滚动的静态导航栏

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Ltesoft</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>
        </div>
    </nav>

     

    静态的顶部

    如需创建能随着页面一起滚动的导航栏,请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距(padding)

     

    固定到底部

    想要让导航栏固定在页面的底部,请向 .navbar class 添加 class .navbar-fixed-bottom

    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">宅咖教育</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>
        </div>
    </nav>

     

    倒置的导航栏

    为了创建一个带有黑色背景白色文本的倒置的导航栏,只需要简单地向 .navbar class 添加 .navbar-inverse class 即可。

    注意:为了防止导航栏与页面主体中的其他内容的顶部相交错,请向 <body> 标签添加至少 50 像素的内边距(padding),

    内边距的值可以根据您的需要进行设置

     

    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Lte科技</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>
        </div>
    </nav>

     

     

    Bootstrap 面包屑导航

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。

    以博客为例,面包屑导航可以显示发布日期、类别或标签。 它们表示当前页面在导航层次结构内的位置

     

    Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。

    分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加。

    .breadcrumb > li + li:before {     color: #CCCCCC;     content: "/ ";     padding: 0 5px; }

     

    <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li class="active">十一月</li>
    </ol>

     

    展开全文
  • 自己做一个Bootstrap前端页面,发现如果把导航栏某一栏的&lt;li&gt;标签的class设置成avtive的话,每次点击其他的导航链接都是那个设置的链接为选中状态。为了解决这个问题,在网上看到了类似这样的做法: ...

    自己做一个Bootstrap前端页面,发现如果把导航栏某一栏的<li>标签的class设置成avtive的话,每次点击其他的导航链接都是那个设置的链接为选中状态。为了解决这个问题,在网上看到了类似这样的做法:

    思路是获取页面的元素,将原来的active移除,将被点击的<li>标签添加上class属性;

    这种方式并没有奏效。

    因为页面导航栏的<a>标签有href,每次点击相当于页面刷新,点击后会有一瞬间的切换但是刷新后还是会恢复到默认的状态,等待下一次的点击、修改、刷新为默认选中(下图应该是人事档案的li标签添加class="avtive",这是修改后的)

    真正的解决办法是:让被选中的标签跟随页面的url变化:

    每次页面加载完成后,根据当前页面的url,获取被点击的标签的ID,在通过JQuery操作为该标签添加active属性;即后设置active属性(上面获取click动作找到被点击标签再修改的方式相当于先修改,页面刷新就会被重置)

    展开全文
  • Bootstrap自适应导航栏

    2016-01-11 17:31:12
    Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 1、向 标签添加 class .navbar、.navbar-default。 2、向上面的元素添加 role="navigation",有助于增加可...
  • Bootstrap 导航栏

    2018-05-25 21:20:08
    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 ...
  • Bootstrap导航栏默认样式 导航栏默认样式是灰色的,它的结构应该由nav标签来包裹,包含logo、页面列表等元素,简单的编码内容如下: navbar-default">  佚站互联  杭州网站建设  杭州网站设计 杭州...
  • 1. 侧滑使用定位fixed 2. 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 3. 侧滑的侧滑效果不使用jquery方法来实现,使用的是css3 transforms属性进行div的...
  • 可切换的标签导航标签间的切换,需要 bootstrap-tab.js 文件支持,因此,要实现可切换的标签导航,首先需要导入 jQuery 库和 bootstrap-tab.js 插件:&lt;script src="assets/js/jquery.js"&gt;&...
  • Bootstrap 响应式导航栏

    2018-04-12 11:16:31
    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 ...
  • 标签导航的布局默认情况下,标签的位于顶部。为了灵活控制标签的位置,Bootstrap额外提供了 3 个类,分别是 .tabs-left、.tabs-right、.tabs-below,它们分别让标签位于左侧、右侧、底部,可以根据需要选择使用。...
  • .sidebar>li :hover{ background: #337ab7 ; color: white; }
  • bootstrap 导航条 栅格系统 Carousel(轮播效果) 标签页 简单好用有注释效果图在 http://blog.csdn.net/dingsai88/article/details/42970767
  • Bootstrap固定导航条

    2019-05-21 16:21:52
    固定导航条 默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动。 很多时候,我们却希望导航条固定在浏览器窗口的顶部或底部,这种固定导航条的应用在移动端尤...
  • 想要详细了解 Bootstrap 的可以去 菜鸟教程学习相关的组件或者去Bootstrap 中文网 状态类 active 的作用 官方的解释为: 鼠标悬停在行或单元格上时所设置的颜色 个人的理解为: 将选中的标签展示出设置的颜色(仅供...
  • 组件的排列 通过添加.navbar-left和....例如,导航条中包含两个导航链接,要对齐导航链接,就要把它们放在两个分开的、应用了工具类的<ul>标签中: <navclass="navbar navbar-default"> <d...
  • &lt;!--第一种方法--&gt; &lt;div class="navbar-collapse collapse" style="text-align: center;"&gt; &lt;ul class="nav navbar-nav" style="...li
1 2 3 4 5 ... 20
收藏数 8,200
精华内容 3,280