Bootstrap4 教程—安装使用—网格系统—文字

Bootstrap4 教程—安装使用—网格系统—文字排版—颜色（一）章

ootstrap4 教程

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

谁适合阅读本教程？

只要您具备 HTML 和 CSS 的基础知识，您就可以阅读本教程，进而开发出自己的网站。在您学习完本教程后，您即可达到使用 Bootstrap 开发 Web 项目的中等水平。

阅读本教程前，您需要了解的知识：

在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:

HTML 教程
CSS 教程
JavaScript 教程

Bootstrap4 实例

Boostrap4 与 Bootstrap3

Boostrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Boostrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。

Bootstrap4 安装使用

我们可以通过以下两种方式来安装 Bootstrap4：

使用 Bootstrap 4 CDN。
从官网 getbootstrap.com 下载 Bootstrap 4。

Bootstrap 4 CDN

国内推荐使用 BootCDN 上的库：

Bootstrap4 CDN

<linkrel="stylesheet"href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script><scriptsrc="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

此外，你还可以使用以下的 CDN 服务：

国内推荐使用 : https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/

下载 Bootstrap 4

你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。

注：此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装：
npm install bootstrap@4.0.0-beta.2gem 'bootstrap', '~> 4.0.0.beta2'composer require twbs/bootstrap:4.0.0-beta.2

创建第一个 Bootstrap 4 页面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

<!DOCTYPEhtml><html><head><metacharset="utf-8"></head></html>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

两个 Bootstrap 4 页面

Bootstrap4 .container 实例

<divclass="container"><h1>我的第一个 Bootstrap 页面</h1><p>这是一些文本。</p></div>

尝试一下 ?

读：按钮是界面中最基础的元素之一，一个个按钮承载着一个个操作指令，响应用户各类操作行为，传达用户的种种业务诉求。B端业务庞大而复杂，不同的场景使用的按钮不同，同一流程不同状态下的按钮也不同，甚至同一模块在不同显示设备上按钮也有所差异。下面是在实际工作中的关于按钮的一些总结和思考，也希望能够给读者带来一些新的思考。

一、按钮类型

依据按钮呈现的视觉重量差异，我们可以通过改变样式将按钮分为主按钮、次按钮、虚线按钮、文字按钮、图标按钮5类。

1.1 主按钮

在日常场景中，主按钮是页面中按钮区最为核心的操作按钮，通过使用主题色填充容器吸引用户视线聚焦，引导用户去关注、操作主流程，强调性较高。

常见有纯文字、图标+文字两种类型，5种不同状态

1.2 次按钮

次按钮是在日常场景中运用最广泛的的一种按钮，由此也被称为默认按钮，视觉呈现上相较于主按钮较“弱”。通常有描边和文字组成的字线型、背景填充（中性色或较浅的主题色）和文字组成的字面型两种，用于按钮区没有主次之分的平级按钮，强调性中等。

常见有纯文字、图标+文字两种类型，5种不同状态

1.3 虚线按钮

虚线按钮在日常场景中属于低频操作按钮，容器内只有简单的虚线边框，视觉上弱于次按钮，常用于场景中的添加操作，强调性较低。

常见有纯文字、图标+文字两种类型，5种不同状态

1.4 文字按钮

文字按钮在日常场景中的使用频次也较高，文字按钮常见也分为两种：一种是各种状态下容器边界都是隐藏的，一种是在hover、press、active状态下容器有背景色填充（较浅中性色）的。不管哪一种形式视觉感受都较弱，通常用于不太明显的操作，强调性较低。

常见有纯文字、图标+文字两种类型，5种不同状态

文字按钮和链接的在默认外观上基本一致，甚至在有的项目中各种交互状态也一致，比较难区分文字按钮和链接。

在我们的团队项目中，文字按钮和链接也做了不同的定义，链接在hover、press、active状态下都有显示下划线，来告知用户这是一个外部的链接；文字按钮则在hover、press、active状态下容器都会填充背景色。

1.5 图标按钮

图标按钮在日常场景中的使用频次较高、也颇为高效，图标按钮默认状态下容器在不可见，视觉感受也较弱，由于没有文字，一些语义性不强的图标容易导致用户理解的偏差，一般用在图标hover状态下会出现Tooltip提示来解决此问题，图标按钮的强调性也较低。

常见只有图标，5种不同状态

综上所述就是在B端项目中十分常见的五种按钮，不同团队、不同项目都会根据自身的实际项目去定义和使用不同按钮。

在我们团队的实际项目中，依据按钮视觉重量的不同，将按钮分为一级按钮（主按钮）、二级按钮（次按钮、虚线按钮）、三级按钮（文字按钮）、四级按钮（图标按钮），在强调属性的重要程度上随级别增加递减。在实际的项目场景中，根据不同需求的强调程度去选择相应级别的按钮，有了这个准则作为指导参考，大大降低了团队在选择按钮时的时间成本。

二、按钮应用细节

2.1 按钮拆解

通过对一个按钮的拆解，可以将按钮分为容器、背景、图标、文本、描边、圆角等基本元素，每种元素的视觉呈现都会反过来影响按钮的外观。不同风格、不同气质的产品，需要相应的处理的影响按钮视觉呈现的各个元素。

2.2 按钮圆角

圆角按钮所带来的不仅仅是圆角大小的视觉表现，更多是影响着用户对整个产品整体认知，以及用户在使用产品过程中的具体感受。合理科学、适合产品气质特征、符合用户预期和认知的圆角元素，对整个产品使用体验的提升是有很大的帮助的。

这里的圆角不仅仅局限于按钮，推而广之适用产品中的每个元素，提前合理的规划各种元素圆角，更会对整个产品的一致性大有裨益。

直角按钮：棱角分明，四角垂直过渡，呈向外扩张之势，给人以尖锐、强烈，不易接近之感。

圆角按钮：与直角相比，四角过渡较舒缓，呈向内聚拢之势，多给人以柔和、亲近，平易好接触之感。

多个直角按钮近距离排列，由于直角的张力的存在，相邻直角按钮的间隔在视觉感受上被弱化，不像圆角按钮那样能更容易的区分、甄别每个按钮。满足产品需求的情况下，适当的圆角按钮较直角按钮更合适。

当然圆角也不是越大越好，相同尺寸的按钮，圆角越大对在页面中的视觉占比越小，操作的容易性越低。尤其在B端与下拉菜单进行联动时，也会受到大圆角（全圆角）的局限，使下拉菜单和按钮的组合适配显得比较突兀。

2.3 按钮loading状态

按钮loading状态算是一种较为特殊的状态，指的是户操作按钮后在得到反馈前的一种临时按钮状态，常与按钮组合在一块作为多态按钮使用。

由于数据量大或者网速不稳定页面造成数据反馈会有一定的响应加载时间，当这个加载时间让用户有明显的等待感知时，就需要一种反馈来告知用户当前正在进行的状态，防止用户在不知情的情况下犯错误操作，一般会使用loading动画来做这种反馈，不仅向用户反映了系统的当前状态，适当的动画效果还能转移用户注意力，起到给用户情绪降躁的效果。

按钮的loading状态则可以代替loading动画，既起到了原来loading动画的效果，又不会因页面变动过大给用户带来不适。在越发重视用户体验的今天，按钮的loading状态也越来越多的运用在产品的各种场景中。

三、按钮应用技巧

通过以上对按钮了解，应该对按钮有个大概的认识，接下来就去看看在实际工作中是怎么制作按钮。

3.1 按钮宽度尺寸

在实际项目中应用中，我们发现按钮中的文本字数≤4能够满足大多数场景。为保证大多数按钮的长度一致，就需要在定制按钮组件时给按钮中的文字区域一个基准宽度，当文字的实际宽度大于基准宽度时，按钮的宽度随着文字的实际宽度增加而增加；当文字的实际宽度不大于基准宽度时，按钮的宽度就是文字的基准宽度+左右padding值。

我们项目的网格基数是4px，基准正常按钮为96*32

3.2 按钮大小

实际项目需求中，不同场景用到的按钮大小（按钮的高度）也会有所不同。在我们的项目中我们将通用按钮划分为大（large）、正常（normal）、小（small）、超小（extra small），按钮高度分别对应着36px、32px、24px、20px。

3.3 按钮颜色

若品牌色定义了从浅到深不同层级的色阶，可使用正常基准色作为按钮的normal颜色，相邻的浅色阶作为hover状态下对应的颜色，相邻深色阶作为press状态下对应的颜色。

我们项目中把“disabled”状态的定义为了一个中性色，用“置灰”的形式来告诉用户当前状态不可操作，而没有选择色阶中的浅色。

如果没有定义从浅到深的色阶，在原来主题色的基础上，则可以给hover状态添加一个透明度为16%（#fff），给press状态添加一个透明度16%（#000），给用户以实时操作反馈。

3.4 按钮区

按钮区是指用于放置按钮的区域，一个按钮区内可以有多个按钮，按钮区的位置应该位于什么页面的什么位置？参考众多设计语言，我们认为按钮应置于用户的视觉浏览路径中，便于被用户发现，并且应尽量靠近其所控制的对象。

结合经典的“F”、“Z”网页浏览模式作为基础指导。我们将一个相对复杂模块分为header、body、footer三个区域：header区域的按钮区放置影响模块全局的操作；body区域的按钮区放置影响跟随内容的操作；footer区域的按钮区放置具有“完结流程”意义的操作。

3.5 一个按钮区一个主按钮

一个模块的按钮区最好只有一个主按钮，否则会对用户造成疑惑，“到底哪一个是主要流程？”，对模块主流程功能造成干扰。

一个模块的按钮区可以没有主按钮，在日常场景中，经常会遇到一个模块中几个分支流程重要程度都是平级的，此时则不需要主按钮。若非要安排一个主按钮则会让使用者产生困惑，造成流程层级混乱。

3.6 按钮的排列

最常见且疑问当属“取消按钮在左边还是右边”，Micrisoft、Apple、Google三家操作系统巨头给出的方案各不相同，可见不管哪种方案，只要能在系统中保证统一性，都是可以被用户所接受的。

在我们团队的项目中定义了这样一个“靠边原则”，既按钮区在左侧时，优先级别高的按钮落在左侧；按钮区在右侧时，优先级别高的按钮落在右侧。按钮位于中间位置时，引导操作的按钮统一在右侧。

3.7 按钮响应式规则

按钮区的按钮较多且页面空间有限时，就需要“折叠”部分按钮，来优雅的展示按钮区效果。当模块宽度变窄，空间不足于完全放得下全部按钮式，此时统一采用靠右“折叠”，部分按钮隐藏在“…”按钮中，鼠标交互时再展示出来，用交互换得更大空间。

参考链接：

https://www.zcool.com.cn/article/ZMTEyNzczMg==.html

https://www.zcool.com.cn/article/ZMTA2NDY2OA==.html

https://www.zcool.com.cn/article/ZMTI2MzUwMA==.html

本文由@小梗果原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于CC0协议

击右上方红色按钮关注“web秀”，让你真正秀起来

文字加载...动画

html

正在加载中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\\A..\\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

<a href="javascript：;" class="upload" title="继续上传">添加图片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*边框虚线*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：颜色渐变动画*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after伪类做 + 号样式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

<div class="speech">不规则的投影</div>

css样式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是内容 
 </div> 
 </div> 
</div>

css样式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

总结

这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

在线咨询

上一篇：如何理解JavaScript代理对象（JavaScr
下一篇：微软Bing现已上线原生Speedtest小部件，搜

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Bootstrap4 教程—安装使用—网格系统—文字

ootstrap4 教程

Bootstrap4 安装使用

一、按钮类型

1.1 主按钮

1.2 次按钮

1.3 虚线按钮

1.4 文字按钮

1.5 图标按钮

二、按钮应用细节

2.1 按钮拆解

2.2 按钮圆角

2.3 按钮loading状态

三、按钮应用技巧

3.1 按钮宽度尺寸

3.2 按钮大小

3.3 按钮颜色

3.4 按钮区

3.5 一个按钮区一个主按钮

3.6 按钮的排列

3.7 按钮响应式规则

文字加载...动画

border 实现边框

不规则的投影 filter

css 实现自适应的弹框

总结

您的项目需求