这就是一个宝库！！哈哈哈哈
间距
用缩写的类向一个元素或者它的边的子集分配margin或者padding属性。包括支持单个属性、所有属性，以及垂直或水平属性。所有的类都使用全局默认的长度倍数：1rem。
外边距
.m-a-0 { margin: 0 !important;}
.m-t-0 { margin-top: 0 !important;}
.m-r-0 { margin-right: 0 !important;}
.m-b-0 { margin-bottom: 0 !important;}
.m-l-0 { margin-left: 0 !important;}
.m-x-0 { margin-right: 0 !important; margin-left: 0 !important;}
.m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important;}
.m-a { margin: 1rem !important;}
.m-t { margin-top: 1rem !important;}
.m-r { margin-right: 1rem !important;}
.m-b { margin-bottom: 1rem !important;}
.m-l { margin-left: 1rem !important;}
.m-x { margin-right: 1rem !important; margin-left: 1rem !important;}
.m-y { margin-top: 1rem !important; margin-bottom: 1rem !important;}
.m-x-auto { margin-right: auto !important; margin-left: auto !important;}
.m-a-md { margin: 1.5rem !important;}
.m-t-md { margin-top: 1.5rem !important;}
.m-r-md { margin-right: 1.5rem !important;}
.m-b-md { margin-bottom: 1.5rem !important;}
.m-l-md { margin-left: 1.5rem !important;}
.m-x-md { margin-right: 1.5rem !important; margin-left: 1.5rem !important;}
.m-y-md { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;}
.m-a-lg { margin: 3rem !important;}
.m-t-lg { margin-top: 3rem !important;}
.m-r-lg { margin-right: 3rem !important;}
.m-b-lg { margin-bottom: 3rem !important;}
.m-l-lg { margin-left: 3rem !important;}
.m-x-lg { margin-right: 3rem !important; margin-left: 3rem !important;}
.m-y-lg { margin-top: 3rem !important; margin-bottom: 3rem !important;} 我是从bootstrap.css复制出来的。和中文文档中显示的有部分是有出入的。 我已经不相信中文文档了。
内填充
.p-a-0 { padding: 0 !important;}
.p-t-0 { padding-top: 0 !important;}
.p-r-0 { padding-right: 0 !important;}
.p-b-0 { padding-bottom: 0 !important;}
.p-l-0 { padding-left: 0 !important;}
.p-x-0 { padding-right: 0 !important; padding-left: 0 !important;}
.p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important;}
.p-a { padding: 1rem !important;}
.p-t { padding-top: 1rem !important;}
.p-r { padding-right: 1rem !important;}
.p-b { padding-bottom: 1rem !important;}
.p-l { padding-left: 1rem !important;}
.p-x { padding-right: 1rem !important; padding-left: 1rem !important;}
.p-y { padding-top: 1rem !important; padding-bottom: 1rem !important;}
.p-a-md { padding: 1.5rem !important;}
.p-t-md { padding-top: 1.5rem !important;}
.p-r-md { padding-right: 1.5rem !important;}
.p-b-md { padding-bottom: 1.5rem !important;}
.p-l-md { padding-left: 1.5rem !important;}
.p-x-md { padding-right: 1.5rem !important; padding-left: 1.5rem !important;}
.p-y-md { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;}
.p-a-lg { padding: 3rem !important;}
.p-t-lg { padding-top: 3rem !important;}
.p-r-lg { padding-right: 3rem !important;}
.p-b-lg { padding-bottom: 3rem !important;}
.p-l-lg { padding-left: 3rem !important;}
.p-x-lg { padding-right: 3rem !important; padding-left: 3rem !important;}
.p-y-lg { padding-top: 3rem !important; padding-bottom: 3rem !important;}又去看了英文文档，人家不是这样的写的。
.m-t-0 { margin-top: 0 !important;}
.m-l-1 { margin-left: $spacer-x !important;}
.p-x-2 { padding-left: ($spacer-x * 1.5) !important;
padding-right: ($spacer-x * 1.5) !important;
}
.p-a-3 { padding: ($spacer-y * 3) ($spacer-x * 3) !important;}所以这就是bootstrapV4测试版的问题所在，有可能存在变化。这也是测试版难免的。两种方法都记录下来，到时候用到了再考虑。或者等正式版出来之后，再重新整理一遍。
文本对齐
<p class="text-justify">Justified text.正文内容</p>
<p class="text-nowrap">No wrap text.英文是“不换行”效果看不出来呀</p><p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>文本转变
<p class="text-lowercase">Lowercased text.全小写</p>
<p class="text-uppercase">Uppercased text.全大写</p>
<p class="text-capitalize">Capitalized text.首单词大写</p>文字加粗和斜体
<p class="font-weight-bold">Bold text.加粗 class="font-weight-bold"</p>
<p class="font-weight-normal">Normal weight text.正常粗？class="font-weight-normal"</p>
<p class="font-italic">Italicized text.斜体 class="font-italic"</p>上下文语境字色和底色
<p class="text-muted">class="text-muted"</p>
<p class="text-primary">class="text-primary"</p>
<p class="text-success">class="text-success"</p>
<p class="text-info">class="text-info"</p>
<p class="text-warning">class="text-warning"</p>
<p class="text-danger">class="text-danger"</p>PS：这里提到的语境，是这段话中最有意义的。
PS：这类的属性，也可以使用在<a>标签中。效果也是可行的。
<div class="bg-primary"> class="bg-primary"</div>
<div class="bg-success"> class="bg-success"</div>
<div class="bg-info"> class="bg-info"</div>
<div class="bg-warning"> class="bg-warning"</div>
<div class="bg-danger"> class="bg-danger"</div>
<div class="bg-inverse"> class="bg-inverse"</div>和例子不一样，是因为例子最外层的<div>绑定了一个class，使padding：0.5rem; margin-top:0.5rem; margin-bottom:0.5rem;
关闭图标
使用一个通用的关闭图标来抹除内容，比如说模态框或alert。确保尽可能地包含了屏幕阅读器文本，我们用.sr-only做到它。
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>特别好奇，× 这样的图标是从哪里使用得来的？mark！知道后补充。
补充：HTML 中有用的字符实体。是HTML自带的。
注释：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
浮动
用一个类把一个元素向左或向右浮动。包含了!important以避免特殊性问题。这些类也可以用作mixins。
<div class="pull-xs-left">浮在xs视口大小左</div>
<div class="pull-xs-right">浮在xs视口大小右</div>
<div class="pull-xs-none">不浮在xs视口大小</div>
<div class="pull-sm-left">左浮动视口大小对SM（小）或更宽</div>
<div class="pull-md-left">左浮动视口大小对MD（中）或更宽</div>
<div class="pull-lg-left">左浮动视口大小对LG（大）或更宽</div>
<div class="pull-xl-left">左浮动视口大小对XL（特大）或更宽</div>PS：因为我的浏览器宽度是半屏大小。所以.pull-md-left类和.pull-xs-left类生效了。所以他浮动了。XS，百度给的翻译是所有视口。我觉得翻译的比较准确。
居中内容
把一个元素设置为display: block，并利用margin居中。这也可以用作mixin或类。
<div class="center-block">Centered block</div>向父元素添加.clearfix类可以轻松清除float。利用 Nicolas Gallagher 发布的the micro clearfix。这也可以用作mixin。
<div class="clearfix">...</div>隐藏内容
此外，.invisible可以用来改变元素的可见性，意味着它的display没有被修改，而且这个元素仍然可以影响文档流。
都隐藏了，就不截图了。
<input type="text" hidden>不可见的内容
.invisible类仅仅能够改变元素的可见性，意味着它的display没有被修改，而且这个元素仍然可以影响文档流。
都隐藏了，就不截图了。
<div class="invisible">...</div>屏幕阅读器
使用.sr-only可以对所有的设备隐藏某个元素，除了在屏幕阅读器里。组合使用.sr-only以及.sr-only-focusable可以让元素获得焦点时再次显示元素（即，键盘的用户用Tab键使它获得焦点）。它也可以用作mixins。
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>PS：应该只对屏幕阅读器生效。
图片替换
利用.text-hide类或者mixin可以帮助用一个背景图片替换一个元素的文本内容。
<h1 class="text-hide">Custom heading</h1>
<div class="bg-success">
<h1 class="text-hide">Custom heading</h1>
</div>如你所见，不过背景色位什么，都不会显示出来。是因为color属性被赋值为 ：transparent 。英文是，透明。（color : transparent;）
响应式嵌入
创建一个可以适应任何设备的尺寸的内在的比率，允许浏览器基于容器块的宽度确定视频或幻灯片的大小。
规则可以直接应用在<iframe>、<embed>、<video>和<object>元素上。如果你想要为别的属性匹配样式，视情况添加一个明确的后代类.embed-responsive-item。
编辑建议！你不需要在<iframe>中包含frameborder="0"，因为我们已经为你覆盖掉它了。
这里是youtube的视频例子。天朝暂时还不行。希望是暂时吧。
但是天朝有YouKu。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://player.youku.com/embed/XNzAzMTgyNTI0" allowfullscreen></iframe>
</div>
扫一扫
1698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
