4.23、Bootstrap V4自学之路------内容---工具类
这就是一个宝库！！哈哈哈哈
间距
用缩写的类向一个元素或者它的边的子集分配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！知道后补充。
浮动
用一个类把一个元素向左或向右浮动。包含了!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>