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 文档） 使用。

  1. <div class="pull-left">...</div>
  2. <div class="pull-right">...</div>
  1. // Classes
  2. .pull-left {
  3. float: left !important;
  4. }
  5. .pull-right {
  6. float: right !important;
  7. }
  8. // Usage as mixins
  9. .element {
  10. .pull-left();
  11. }
  12. .another-element {
  13. .pull-right();
  14. }

不能用于导航条组件中

排列导航条中的组件时可以使用这些工具类：.navbar-left 或.navbar-right 。 参见导航条文档以获取更多信息。

3.让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

  1. <div class="center-block">...</div>
  1. // Class
  2. .center-block {
  3. display: block;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }
  7. // Usage as a mixin
  8. .element {
  9. .center-block();
  10. }

4.清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

而且这种去除浮动也比较理想，虽然overflow: hidden;也能去除但是始终会遇到一些突出被影藏的问题。

  1. <!-- Usage as a class -->
  2. <div class="clearfix">...</div>
  1. // Mixin itself
  2. .clearfix() {
  3. &:before,
  4. &:after {
  5. content: " ";
  6. display: table;
  7. }
  8. &:after {
  9. clear: both;
  10. }
  11. }
  12. // Usage as a mixin
  13. .element {
  14. .clearfix();
  15. }

5.显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像quick floats一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

  1. <div class="show">...</div>
  2. <div class="hidden">...</div>
  1. // Classes
  2. .show {
  3. display: block !important;
  4. }
  5. .hidden {
  6. display: none !important;
  7. visibility: hidden !important;
  8. }
  9. .invisible {
  10. visibility: hidden;
  11. }
  12. // Usage as mixins
  13. .element {
  14. .show();
  15. }
  16. .another-element {
  17. .hidden();
  18. }

bootstrap注意事项（八）一些辅助信息的更多相关文章

  1. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  2. bootstrap注意事项（五）表单

    1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...

  3. Bootstrap入门（八）组件2：下拉菜单

    Bootstrap入门(八)组件2:下拉菜单   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...

  4. bootstrap注意事项（四）表格

    1.基本实例 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使 ...

  5. bootstrap注意事项（二）

    1.内联子标题 在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题. <!DOCTYPE html> <html> < ...

  6. bootstrap注意事项（六）按钮

    1.预定义样式 使用下面列出的类可以快速创建一个带有预定义样式的按钮 <!DOCTYPE HTML><html><head> <link rel=" ...

  7. Hadoop案例（八）辅助排序和二次排序案例（GroupingComparator）

    辅助排序和二次排序案例(GroupingComparator) 1.需求 有如下订单数据 订单id 商品id 成交金额 0000001 Pdt_01 222.8 0000001 Pdt_05 25.8 ...

  8. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  9. bootstrap注意事项（七）图片

    在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图 ...

随机推荐

  1. HDOJ-1042 N!（大数乘法）

    http://acm.hdu.edu.cn/showproblem.php?pid=1042 题意清晰..简单明了开门见山的大数乘法.. 10000的阶乘有35000多位 数组有36000够了 # i ...

  2. poj 3761 Bubble Sort_快速幂

    题意:问你冒泡排序第i次排序,一共排了多少次 套公式K!((K + 1) ^ (N - K) - K ^ (N - K)) #include <iostream> #include< ...

  3. 【LeetCode练习题】Gas Station

    Gas Station There are N gas stations along a circular route, where the amount of gas at station i is ...

  4. 使用xmanager 远程redhat6.3

    之前装过一次,特别麻烦,装上只有远程还卡卡的,这次按照教程居然装的灰常顺利,不符合我bug体质的特性,一定要记下来啊~~~ 1.先关闭防火墙 # service iptables stop #chkc ...

  5. 实现简答LinkedList

    package com.表栈和队列; import java.util.Iterator; /**  * 实现LinkedList  * 60页  * @author zj  *  * @param ...

  6. 启动监听报错：TNS-12537: TNS:connection closed TNS-12560: TNS:protocol adapter error TNS-00507: Connection closed Linux Error: 29: Illegal seek

    启动监听程序报错: 说明:在rhel5.8上安装完成oracle11g数据库后,使用netca创建完监听,启动监听时报错.还未使用dbca创建实例. [oracle@rusky-oracle11g ~ ...

  7. 关于Oracle数据库字符集的选择

    如果数据库只在中国地区使用,数据库字符集选择ZHS16GBK或者常用中文字符集,如果不确定,就推荐使用AL32UTF8 国家字符集就选择: AL16UTF16 字符集一旦设定,不允许修改,修改可能出现 ...

  8. 【MFC学习笔记-作业5-小数据库】【单选框，复选框，滚动条，列表框】

    界面已经实现完毕. 要完成的操作就是1.性别分组(2选1) 2.属性勾选 3.年龄通过滚动条调整 4.职称通过下方的列表框选择 5.输入姓名 6.存入左方的列表框 7.当选择左方列表框的人时,可以显示 ...

  9. win7启动后报丢失nscmk.dll解决解决方式

    1.根据当前计算机选择下载64位或者32位nscmk.dll 2.拷贝nscmk.dll到相路径(32位:%windir%\system32\:64位:%windir%\SysWOW64\nscmk. ...

  10. Javascript 【JSON对象】

    var box = JSON.parse(json);     //将字符串解析为JSON var json = JSON.stringify(box);    //讲JSON转换为字符串 var b ...