文档章节

4.23、Bootstrap V4自学之路------内容---工具类

Asktao
 Asktao
发布于 2016/03/25 22:15
字数 1878
阅读 123
收藏 0

这就是一个宝库!!哈哈哈哈

间距

用缩写的类向一个元素或者它的边的子集分配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">&times;</span>
  <span class="sr-only">Close</span>
</button>

特别好奇,&times; 这样的图标是从哪里使用得来的?mark!知道后补充。

补充:HTML 中有用的字符实体。是HTML自带的。

注释:实体名称对大小写敏感!

显示结果 描述 实体名称 实体编号

空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
&cent; &#162;
£ &pound; &#163;
¥ 日圆 &yen; &#165;
欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;


浮动

用一个类把一个元素向左或向右浮动。包含了!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>


© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
444
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
159
1
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
181
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
335
0
3.3、Bootstrap V4自学之路------内容---图片

以下部分都是在<img>标签中操作 响应式图片 实验失败!已引入holder.js文件。data-src="holder.js/100x64时可以出现占位图。但当holder.js/100%x64时,不显示。 <div style="width:100%;hei......

Asktao
2016/03/22
161
0

没有更多内容

加载失败,请刷新页面

加载更多

领域驱动中的“贫血症和失忆症”

贫血症严重危害着人类健康,并且伴随有危险的副作用。当贫血领域对象被首次提出来时,它并不是一个博得赞美的词汇,它描述的是一个缺少内在行为领域对象。奇怪的是,人们对于贫血领域对象的态...

还仙
3分钟前
1
0
条码打印软件中标签预览正常打印无反应怎么解决

在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决。 一、预览正常情况下,打印没反应 (1)在条码...

中琅软件
12分钟前
1
0
判断字符串的时候

判断字符串的时候一定把常量房前边, //报警程度 String leve = vo.getDeviceAlertDeal().getWarnLevel(); if(("0").equals(leve)) { row.add("无报警"); }else if(("1").equals(leve)) { ro......

简小姐
13分钟前
2
0
Linux maven3.6.2 install

PS:安装 maven 之前请先安装 jdk 1.安装 wget 命令(安装过就不用了) yum -y install wget 2.寻找需要的 maven 版本 https://maven.apache.org/download.cgi 3.进入 /var/local 文件夹 cd...

东方神祇
15分钟前
1
0
Tomcat源码分析二:先看看Tomcat的整体架构

Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server、Service、Connector、Container等组件,接下...

flygrk
18分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部