[Bootstrap]组件(四)
导航条
移动设备上折叠(可开关),超过规定视口标签时候水平展开模式 依赖插件
注意点:导航条内元素过多或其他原因导致元素内元素宽度过长,会引起折行-->解决: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">«</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">»</span>
</a>
</li>
</ul>
</nav>
分页禁止和激活状态
禁止.disabled/激活.active
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
[Bootstrap]组件(四)的更多相关文章
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- Bootstrap之Bootstrap组件
一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- Bootstrap组件福利篇:十二款好用的组件推荐
阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...
- bootstrap组件和插件
一.用node.js读取文件 //引入fs模块 var fs= require ('fs'); // console.log(fs); //调用fs模块的readFile方法 fs.readFile( ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
随机推荐
- SignalR的简单实现
1创建mvc的空项目 2添加文件夹Counters放在里面的类用于封装性能计数器 3创建PerfCounterWrapper类用于封装性能计数器的实体 using System; using Syst ...
- 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 8.全局防护盲点的总结下篇
0x01 背景 现在的WEB应用对SQL注入的防护基本都是判断GPC是否开启,然后使用addlashes函数对单引号等特殊字符进行转义.但仅仅使用这样的防护是存在很多盲点的,接上篇http://www ...
- linux设备驱动之select
转载:http://blog.csdn.net/mo_hui123456/article/details/7961619 select系统调用用于多路监控,为什么称为多路呢,它可监控多个文件,例如我监 ...
- tachyon 配置项
Tachyon 配置参数分为4类:Master,Worker, Common (Master and Worker), and User configurations. 环境变量配置文件在$TACHY ...
- C# 之 FileSystemWatcher事件多次触发的解决方法
1.问题描述 程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理.于是使用了下面的代码: public void Initial() { ...
- SQL Server 中的事务和锁(三)-Range S-U,X-X 以及死锁
在上一篇中忘记了一个细节.Range T-K 到底代表了什么?Range T-K Lock 代表了在 SERIALIZABLE 隔离级别中,为了保护范围内的数据不被并发的事务影响而使用的一类锁模式(避 ...
- Frogs' Neighborhood
Frogs' Neighborhood Time Limit: 5000MS Memory Limit: 10000K Total Submissions: 7920 Accepted: 33 ...
- solr查询在solrconfig.xml中的配置
<requestHandler name="/select" class="solr.SearchHandler"> <lst name=&q ...
- JAVA 多态的一种实现
今天一个同事问我一个问题,就是关于子类,父类之间方法的调用这里的.这里我整理了一个小DEMO. 代码如下: 父类的代码: public abstract class ClassA { public f ...
- SqlServer之代码块相关
原创文章,转载必需注明出处:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/sqlserver-codeblock/ 一.go语句 ...