bootstrap基本的CSS样式 图片 响应式工具

1.响应式图片
<img src="..." class="img-responsive" alt="Responsive image">

2.图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

3.辅助类
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

4.关闭按钮
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

5.三角符号
<span class="caret"></span>

6.快速浮动
<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();
}
7.Center content blocks
<div class="center-block">...</div>
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

// Usage as mixins
.element {
.center-block();
}
8.Clearfix
<!-- 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();
}

9.Showing and hiding content
<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();
}

10Screen reader and keyboard navigation content

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}

Image replacement
<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
.text-hide();
}
后面都是样式处理，暂时不学习