您的位置：首页 > Web前端 > BootStrap

bootstrap注意事项（八）一些辅助信息

2015-08-21 22:00 726 查看

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;也能去除但是始终会遇到一些突出被影藏的问题。



<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();

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航