文档章节

bootstrap导航栏

reid3290
 reid3290
发布于 2015/01/28 11:28
字数 802
阅读 587
收藏 0

参见:http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html

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

向 <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>

分析:

    最外层是

<nav class="navbar navbar-default" role="navigation">

在bootstrap.css中

.navbar {

  position: relative;

  min-height: 50px;

  margin-bottom: 20px;

  border: 1px solid transparent;

}

注:transparent是边框颜色的默认值,表示颜色透明。

@media (min-width: 768px) {

  .navbar {

    border-radius: 4px;

  }

}

注:CSS3 @media 查询,参见:http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。语法如下:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

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%;
    }
}

.navbar {

    display: none;

  }

.navbar-default {

  background-color: #f8f8f8;

  border-color: #e7e7e7;

}


然后是整个导航栏的标题

<div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>

@media (min-width: 768px) {

  .navbar-header {

    float: left;

  }

}

.container > .navbar-header,

.container-fluid > .navbar-header,

.container > .navbar-collapse,

.container-fluid > .navbar-collapse {

  margin-right: -15px;

  margin-left: -15px;

}

@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 {

  float: left;

  height: 50px;

  padding: 15px 15px;

  font-size: 18px;

  line-height: 20px;

}

.navbar-brand:hover,

.navbar-brand:focus {

  text-decoration: none;

}

@media (min-width: 768px) {

  .navbar > .container .navbar-brand,

  .navbar > .container-fluid .navbar-brand {

    margin-left: -15px;

  }

}

.navbar-default .navbar-brand {

  color: #777;

}

.navbar-default .navbar-brand:hover,

.navbar-default .navbar-brand:focus {

  color: #5e5e5e;

  background-color: transparent;

}

.navbar-inverse .navbar-brand {

  color: #777;

}

.navbar-inverse .navbar-brand:hover,

.navbar-inverse .navbar-brand:focus {

  color: #fff;

  background-color: transparent;

}


再然后是导航栏中的项目列表

<ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>

.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: #777;

}

.nav > li.disabled > a:hover,

.nav > li.disabled > a:focus {

  color: #777;

  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;

}

.navbar-nav {

  margin: 7.5px -15px;

}

.navbar-nav > li > a {

  padding-top: 10px;

  padding-bottom: 10px;

  line-height: 20px;

}

@media (min-width: 768px) {

  .navbar-nav {

    float: left;

    margin: 0;

  }

.dropdown-menu > .active > a,

.dropdown-menu > .active > a:hover,

.dropdown-menu > .active > a:focus {

  color: #fff;

  text-decoration: none;

  background-color: #428bca;

  outline: 0;

}

表示每个具体项目的<li>中,可以添加表单、下拉菜单、按钮等各种元素。

© 著作权归作者所有

reid3290
粉丝 2
博文 64
码字总数 15933
作品 0
闵行
程序员
私信 提问
Bootstrap 导航栏

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

wybo521
2016/01/27
83
0
Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: ...

珲少
2016/12/12
178
0
Pycharm上Django的使用 Day13

设置应用程序的样式 为设置样式,我们将使用Bootstrap库 1.应用程序django-bootstrap3 1>安装django-bootstrap3 在活动的虚拟环境中执行命令:pip install django-bootstrap3 来进行安装 2>在...

不会TC的猫
2018/11/30
32
0
[译] 用 30 分钟建立一个网站的方式来学习 Bootstrap 4

原文地址:Learn Bootstrap 4 in 30 minutes by building a landing page website 原文作者:SaidHayani@ 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Zheng7426...

zheng7426
2018/07/30
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
29分钟前
5
0
Java8新特性时间日期库DateTime API及示例

Java8新特性的功能已经更新了不少篇幅了,今天重点讲解时间日期库中DateTime相关处理。同样的,如果你现在依旧在项目中使用传统Date、Calendar和SimpleDateFormat等API来处理日期相关操作,这...

程序新视界
40分钟前
7
0
医疗项目pc端后台页面用vue重构整个html页面

页面源码是vue

xintaiideas
今天
6
0
领域驱动中的“贫血症和失忆症” --实践领域驱动--原文

贫血症严重危害着人类健康,并且伴随有危险的副作用。当贫血领域对象被首次提出来时,它并不是一个博得赞美的词汇,它描述的是一个缺少内在行为领域对象。奇怪的是,人们对于贫血领域对象的态...

还仙
今天
6
0
条码打印软件中标签预览正常打印无反应怎么解决

在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决。 一、预览正常情况下,打印没反应 (1)在条码...

中琅软件
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部