bootstrap注意事项（八）一些辅助信息
1.三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
</head>
<body>
<div class="bs-example" data-example-id="contextual-colors-helpers">
<span class="caret"></span>
</div>
</body>
</html>
2.快速浮动
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用。
- <div class="pull-left">...</div>
- <div class="pull-right">...</div>
- // Classes
- .pull-left {
- float: left !important;
- }
- .pull-right {
- float: right !important;
- }
- // Usage as mixins
- .element {
- .pull-left();
- }
- .another-element {
- .pull-right();
- }
不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或.navbar-right 。 参见导航条文档以获取更多信息。
3.让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
- <div class="center-block">...</div>
- // Class
- .center-block {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- // Usage as a mixin
- .element {
- .center-block();
- }
4.清除浮动
通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
而且这种去除浮动也比较理想，虽然overflow: hidden;也能去除但是始终会遇到一些突出被影藏的问题。
- <!-- Usage as a class -->
- <div class="clearfix">...</div>
- // Mixin itself
- .clearfix() {
- &:before,
- &:after {
- content: " ";
- display: table;
- }
- &:after {
- clear: both;
- }
- }
- // Usage as a mixin
- .element {
- .clearfix();
- }
5.显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像quick floats一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。
.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
- <div class="show">...</div>
- <div class="hidden">...</div>
- // Classes
- .show {
- display: block !important;
- }
- .hidden {
- display: none !important;
- visibility: hidden !important;
- }
- .invisible {
- visibility: hidden;
- }
- // Usage as mixins
- .element {
- .show();
- }
- .another-element {
- .hidden();
- }
bootstrap注意事项（八）一些辅助信息的更多相关文章
- Bootstrap <基础十八>面包屑导航（Breadcrumbs）
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- bootstrap注意事项（五）表单
1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...
- Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...
- bootstrap注意事项（四）表格
1.基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使 ...
- bootstrap注意事项（二）
1.内联子标题 在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题. <!DOCTYPE html> <html> < ...
- bootstrap注意事项（六）按钮
1.预定义样式 使用下面列出的类可以快速创建一个带有预定义样式的按钮 <!DOCTYPE HTML><html><head> <link rel=" ...
- Hadoop案例（八）辅助排序和二次排序案例（GroupingComparator）
辅助排序和二次排序案例(GroupingComparator) 1.需求 有如下订单数据 订单id 商品id 成交金额 0000001 Pdt_01 222.8 0000001 Pdt_05 25.8 ...
- bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap注意事项（七）图片
在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图 ...
随机推荐
- linux的7种运行级别<学习笔记>
Linux系统有7个运行级别(runlevel) 运行级别0:系统停机状态,系统默认运行级别不能设为0,否则不能正常启动 运行级别1:单用户工作状态,root权限,用于系统维护,禁止远程登陆 运行级别 ...
- 【男性身材计算】胸围=身高*0.48(如：身高175cm的标准胸围=175cm*0.61=84cm)；腰围=身高*0.47(如：身高175c… - 李峥 - 价值中国网
[男性身材计算]胸围=身高*0.48(如:身高175cm的标准胸围=175cm*0.61=84cm):腰围=身高*0.47(如:身高175c- - 李峥 - 价值中国网 李峥:[男性身材计算]胸围=身 ...
- bzoj 维护序列seq(双标记线段树)
Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 4184 Solved: 1518[Submit][Status][Discus ...
- 步步学LINQ to SQL:将类映射到数据库表【转】
[IT168 专稿]该系列教程描述了如何采用手动的方式映射你的对象类到数据表(而不是使用象SqlMetal这样的自动化工具)以便能够支持数据表之间的M:M关系和使用实体类的数据绑定.即使你选择使用了自 ...
- Cocos2d-x Render-NewCulling
.cpp layout->setBackGroundImageScale9Enabled(true); layout->setBackGroundImage("green_edi ...
- 运用Autoconf和Automake生成Makefile的学习之路
作为Linux下的程序开发人员,大家一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的M ...
- magento新闻邮件发送一直处于“正在发送”状态问题解决
今天在弄magento新闻邮件发送时候发现,单个邮件发送全然没有问题,可是新闻邮件订阅死活都不成功.国内国外的帖子都翻了一遍没实用,最后还是得靠自己了.于是開始慢慢找问题 首先想到是不是crontab ...
- 优先队列(priorityqueue)
队列是先进先出的线性表,顾名思义,优先队列则是元素有优先级的队列,出列的顺序由元素的优先级决定.从优先队列中删除元素是根据优先权的高低次序,而不是元素进入队列的次序.优先队列的典型应用是机器调度等. ...
- AOP面试遇到的问题
1.什么是AOP? 面向切面的编程,找出纸和笔,画一个箭头,两道竖线将这个箭头砍断,这就是AOP 举例来说,某个方法正在运行呢,要想在前面加个日志,加在这里,后面加个日志,加在这里,前面加transa ...
- 一个很奇特的异常 tmpFile.renameTo(classFile) failed
刚换新电脑 win8+迈克菲 ,当tomcat把默认端口更改后(或者是启动了迈克菲的实时扫描),部署工程后,主页打不开了. 杀毒软件都会造成这个问题 百度杀毒全家桶 360全家桶 关掉就好了 .怀疑是 ...