Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

  Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:

  1、导航条中的按钮navbar-btn

  2、导航条中的文本navbar-text

  3、导航条中的普通链接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>
时间: 2024-08-06 15:51:54

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接的相关文章

Bootstrap系列 -- 40. 导航条二级菜单

在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">导航条</a> </div> <ul class="nav navb

Bootstrap系列 -- 39. 导航条添加标题

在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现. <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" c

bootstrap-导航条中的按钮、文本和链接

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航条中的按钮.文本和链接</title>     <!-- 最新版

Bootstrap组件之导航条

.navbar--设置nav元素为导航条组件: .navbar-default--指定导航条组件为默认主题: .navbar-inverse--指定导航条组件为黑色主题: .navbar-fixed-top--设置导航条组件固定在顶部: .navbar-fixed-bottom--设置导航条组件固定在底部: .container-fluid--设置宽度充满父元素,即为100%: .navbar-header--主要指定div元素为导航条组件包裹品牌图标及切换按钮: .navbar-toggle-

bootstrap 组件之&quot;导航条&quot;

一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">品牌名称</a> </div> </div> <

导航条点击按钮切换效果

<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><![endif]--><html xmlns="http://www.w3.org/1999/xhtml"><head>&

android 导航栏中的按钮的点击切换

Drawable drawable_home = res.getDrawable(R.drawable.main_home_selected);//图片 drawable_home.setBounds(0, 0, drawable_home.getMinimumWidth(), drawable_home.getMinimumHeight());//设置边距 home_bt.setCompoundDrawables(null, drawable_home, null, null);//设置按钮b

基于bootstrap实现收缩导航条

<!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

037在工具条中自定义按钮(2)

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController () 4 @end 5 6 @implementation ViewController 7 8 - (void)v