导航条

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

注意点:导航条内元素过多或其他原因导致元素内元素宽度过长,会引起折行-->解决: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. SignalR的简单实现

    1创建mvc的空项目 2添加文件夹Counters放在里面的类用于封装性能计数器 3创建PerfCounterWrapper类用于封装性能计数器的实体 using System; using Syst ...

  2. 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 8.全局防护盲点的总结下篇

    0x01 背景 现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,接上篇http://www ...

  3. linux设备驱动之select

    转载:http://blog.csdn.net/mo_hui123456/article/details/7961619 select系统调用用于多路监控,为什么称为多路呢,它可监控多个文件,例如我监 ...

  4. tachyon 配置项

    Tachyon 配置参数分为4类:Master,Worker, Common (Master and Worker), and User configurations. 环境变量配置文件在$TACHY ...

  5. C# 之 FileSystemWatcher事件多次触发的解决方法

    1.问题描述  程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理.于是使用了下面的代码: public void Initial() { ...

  6. SQL Server 中的事务和锁(三)-Range S-U,X-X 以及死锁

    在上一篇中忘记了一个细节.Range T-K 到底代表了什么?Range T-K Lock 代表了在 SERIALIZABLE 隔离级别中,为了保护范围内的数据不被并发的事务影响而使用的一类锁模式(避 ...

  7. Frogs' Neighborhood

    Frogs' Neighborhood Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 7920   Accepted: 33 ...

  8. solr查询在solrconfig.xml中的配置

    <requestHandler name="/select" class="solr.SearchHandler"> <lst name=&q ...

  9. JAVA 多态的一种实现

    今天一个同事问我一个问题,就是关于子类,父类之间方法的调用这里的.这里我整理了一个小DEMO. 代码如下: 父类的代码: public abstract class ClassA { public f ...

  10. SqlServer之代码块相关

    原创文章,转载必需注明出处:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/sqlserver-codeblock/ 一.go语句 ...