bootstrap导航栏

最新推荐文章于 2024-05-20 22:54:06 发布
最新推荐文章于 2024-05-20 22:54:06 发布
阅读量95 收藏
点赞数
文章标签： python javascript java ViewUI
原文链接：https://my.oschina.net/u/2255071/blog/372609
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

参见：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>中，可以添加表单、下拉菜单、按钮等各种元素。

转载于:https://my.oschina.net/u/2255071/blog/372609

weixin_34419326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 导航栏
shengyin714959的博客
08-14 790
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
修改bootstrap导航栏样式(颜色，高)
qq_45532769的博客
02-28 3532
修改bootstrap导航栏样式(颜色，高)
navbar
06-16 98
.navbar-toggle:focus { outline: 0; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } @media (min-width: 768px) { .navbar-toggle { display...
深入理解BootStrap Item11 -- 导航页（navbar）
热门推荐
小平果的欢乐谷
11-15 1万+
导航条导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色（显示更突出）、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。导航条和导航一样，在Bootstrap框架中是一个独立组件，所
Bootstrap导航条
歪脖先生的博客
05-19 7022
导航条 Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。 创建导航...
bootstrap 导航条居中
qq_40463625的博客
10-08 3948
为了实现bootstrap导航条里面的导航按钮居中，并响应小屏幕，着实折腾了一波，。记录一下： 1：.navbar-collapse 设置 文字居中 text-align: center; 2：导航容器 .navbar-nav，设置为行内块元素 display: inline-block; 3：导航选项 li， 设置为块元素 display: block; <nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-ju
Bootstrap的导航栏设计相关知识
昊虹AI笔记
10-18 1212
Bootstrap的导航栏设计相关知识
Bootstrap导航栏点击失效的解决方法
qq_61126874的博客
07-20 1413
bootstrap汉堡按钮下拉失效
bootstrap导航栏_Bootstrap框架——如何巧妙改变导航栏颜色
weixin_39561004的博客
11-24 871
当我们用Bootstrap框架来制作网页的时候，有时候会想要改变一些框架样式中单调的颜色，让网页变得与众不同，但是当我们自己link css的时候会不会遇到这样一个问题：明明link了默认的Bootstrap样式，也link了自己写的样式，但是网页并没有按我们想象的做出变化。 html渲染的时候是自上而下的，后面的样式会覆盖前面的样式。所以我们需要把自己的样式在最后引入...
BootStrap 导航条实例代码
08-30
本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
09-02
主要介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
BootStrap导航栏问题记录
12-29
今天完成的事情：（实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。） 我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后，突然...
bootstrap 导航栏下拉菜单，居右下拉菜单
09-05
练习
【hackmyvm】Slowman靶机
woshicainiao666的博客
05-20 118
发现/secretLOGIN/login.html为登录地址，根据账号密码登录发现一个zip，但是需要密码。在FTP中得到的账号，爆破一下SSH。上传linpeas.sh文件，报一下。SSH爆破无果，试试mysql。得到用户名和加密的密码。
Python实战开发及案例分析（31）—— 哈希算法
最新发布
贾贾的博客
05-20 468
哈希算法（Hash Algorithm）是一种将输入数据映射到固定大小的输出（通常是一个整数或字符串）的算法。哈希算法广泛应用于数据结构（如哈希表）、加密、数据校验等领域。下面将详细介绍哈希算法的基本原理，并通过具体案例展示如何在Python中实现和应用哈希算法。
Gradio 案例——将 dicom 文件转为 nii文件
蒋含竹的博客
05-15 352
Gradio 的WEB界面案例：利用 SimpleITK 库，将 dicom 文件转为 nii文件
Python slice() 使用方法及示例说明
ym62033的博客
05-15 183
处。
bootstrap 导航栏
05-26
Bootstrap 导航栏是一种常见的网站导航方式，可以让用户快速找到所需内容。以下是一个简单的 Bootstrap 导航栏示例： ```html <a class="navbar-brand" href="#">Logo <span class="navbar-toggler-icon"></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值