导航条

移动设备上折叠(可开关),超过规定视口标签时候水平展开模式 依赖插件

注意点:导航条内元素过多或其他原因导致元素内元素宽度过长,会引起折行-->解决:a.减少导航内元素或者减少宽度  b.利用媒体查询或者响应工具类隐藏元素  c.修改媒体查询的值或者重置覆盖媒体查询的值

注意点:<nav>元素 || <div role="navigation"></div>

/*
* 1 nav(.navbar.navbar-*:基类+状态类)(div元素需要额外添加role="navigation")
* 2 div(.container-fluid:响应式容器)
* 3 div(.navbar-header:导航条头部) + div(.collapse.navbar-collapse:折叠类+导航折叠类)
* 3.1 导航条头部 内部:btn(.navbar-toggle.collapsed:导航开关类+被折叠类)+a(.navbar-brand:导航条商标类)
* 3.2 折叠类+导航折叠类 内部:ul(.nav.navbar-nav:导航基类+导航条导航类)+(表单)
*/ <nav class="navbar navbar-default"> <!-- nav元素/div元素添加role="navigation" 基类.navbar 状态类.navbar-default -->
<div class="container-fluid"> <!-- 容器.container-fluid 响应式容器 -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <!-- 导航条头部 内容包括折叠按钮和logo/商标 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!--导航条中的折叠按钮-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a> <!-- 导航条logo/商标 -->
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- 导航条的主要内容 可包含导航链接/表单/其他内容 在媒体查询的规定宽度下可折叠开关 -->
<ul class="nav navbar-nav"> <!-- 导航 导航条下的导航 -->
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <!-- 下拉菜单 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<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">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right"> <!-- 导航 导航条下的导航 导航想右对齐 -->
<li><a href="#">Link</a></li>
<li class="dropdown"> <!-- 下拉菜单 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

导航条中的品牌图标

.navbar-brand类中放置img元素,即可设置自己的商标,根据需要修改css或覆盖css

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">
<img src="..."/>
</a>
</div>
</div>
</nav>

导航条中的表单

<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search" />
</div>
<button type="submit" class="btn btn-default">submit</button>
</form>

导航条中的按钮

<button type="button" class="btn btn-default navbar-btn">button</button>

导航条中的文本

<p class="navbar-text">navbar-text</p>

非导航的链接

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

组件排列

.navbar-left/.navbar-right -->导航链接/表单/按钮/文本对齐

最后一个.navbar-right设置了负边距,最好不要用多个.navbar-right

导航条固定在顶部

.navbar-fixed-top 固定的导航条引起遮挡body内部其他的信息,可能需要对其添加内补等额外样式

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>

导航条静止在顶部

.navbar-static-top 不需要给body设置内补

<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>

路径导航

面包屑.breadcrumb  {padding/margin-bottom/list-style/background-color/border-radius}

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

分页

nav>ul.pagination>li>a

<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

分页禁止和激活状态

禁止.disabled/激活.active

<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>

翻页

nav>ul.pager>li*2>a

<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

翻页两端对齐

nav>ul.pager>(li.previous>a)+(li.next>a)

<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>

[Bootstrap]组件(四)的更多相关文章

  1. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  2. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

  3. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  4. Bootstrap之Bootstrap组件

    一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...

  5. 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  6. Bootstrap组件福利篇:十二款好用的组件推荐

    阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...

  7. bootstrap组件和插件

    一.用node.js读取文件 //引入fs模块 var fs= require ('fs'); // console.log(fs); //调用fs模块的readFile方法 fs.readFile( ...

  8. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  9. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  10. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

随机推荐

  1. 【JavaScript】关于JS中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  2. typedef函数指针使用方法

    1.简单的函数指针的应用 形式1:返回类型(*函数名)(參数表) char (*pFun)(int); char glFun(int a){ return;} void main() { pFun = ...

  3. NPOI 教程 - 3.2 打印相关设置

    转:http://www.cnblogs.com/wolfplan/archive/2013/01/13/2858991.html NPOI 教程 - 3.2 打印相关设置   打印设置主要包括方向设 ...

  4. C++中临时对象的学习笔记

    http://www.cppblog.com/besterChen/category/9573.html 所属分类: C/C++/STL/boost  在函数调用的时候,无论是参数为对象还是返回一个对 ...

  5. linux中mail函数不能发送邮件怎么办

    原因分析: 1.检查下本机25端口是否有开放 2.mail是利用linux自带的sendmail服务来发送邮件的,service sendmail status 查看下该服务的状态 发送命令:mail ...

  6. Laravel 5.0 之命令及处理程序

    本文译自 Matt Stauffer 的 系列文章 . 本文中涉及的新功能都是关于 Commands 的,这些特性在 Laravel 旧版本中已经有了,但是在 Laravel 5.0 中变得更加好用了 ...

  7. [Arduino] 基于Xbee Pro和网络技术的智能公交系统设计

    转自:http://www.21ic.com/app/rf/201112/99474.htm 引言 公共交通具有个体交通无法比拟的强大优势,优先发展城市公共交通系统是解决大.中城市交通问题的最佳途径. ...

  8. 【阿里云产品公测】Opensearch使用体验和评测

    作者:阿里云用户outofmemory 昨天晚上收到了阿里云发的邮件,Open search可以申请公测了,于是迫不及待申请了测试,审核人员很高效,过了不到俩小时给批下来了.  很开心,于是趁今天是周 ...

  9. 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)

     层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...

  10. oracle PL/SQL(procedure language/SQL)程序设计之异常(exception)

    什么是异常?在PL/SQL中的一个标识.在程序运行期间被触发的错误.异常是怎样被触发的?产生一个Oracle错误.用户显示触发.怎样处理异常?用异常处理句柄捕获异常.传播异常到调用环境. 捕获异常 E ...