一片关于Bootstarp4的文章

一、Bootstarp

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。可以让你快速的排版，不用在写那些繁杂的样式。Bootstrap是开源免费的，设计人员可以方便的从网上下载最新的版本。Bootstrap 源码里包含预先编译的CSS、JavaScript 和图标字体文件以及LESS、JavaScript 和文档的源码。

二、学完Bootstarp4的一些通用工具的记录

1.边框的设置

添加边框属性，显示指定边框。
（注意看边框的效果时需要加上内容）
效果图如下：

<span class="border">这是内容</span>
<span class="border-top">这是内容</span>
<span class="border-right">这是内容</span>
<span class="border-bottom">这是内容</span>
<span class="border-left">这是内容</span>

<span class="border border-primary">这是内容</span>（设置边框的颜色）
（"border-primary"是边框的颜色）
使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。

2.颜色设置

效果图如下：

代码如下：

<p class="text-primary">.text-primary</p>浅蓝色
<p class="text-secondary">.text-secondary</p>黑色
<p class="text-success">.text-success</p>绿色
<p class="text-danger">.text-danger</p>红色
<p class="text-warning">.text-warning</p>黄色
<p class="text-info">.text-info</p>深蓝色
不一一列举

使用颜色样式，在链接上也能正常使用（呈现）， 注意：e .text-white 、 .text-muted这两个 class样式不支持链接上使用（没有链接样式）。

三、网格系统

<1>.Bootstrap 4 网格系统有以下 5 个类:

• col- 针对所有设备
• col-sm- 平板 - 屏幕宽度等于或大于 576px
• col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
• col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
• col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

<2>.基本的样式
效果图如下

代码如下

<div class="container-fluid">（container-fluid"是控制网页内容和body的留白）
  <div class="row">
    <div class="col" style="background-color:lavender;">.first</div>
    <div class="col" style="background-color:orange;">.second</div>
    <div class="col" style="background-color:lavender;">.third</div>
  </div>
</div>

以上只是Bootstarp中的一点点，还有很多。

标签：一片,Bootstarp4,样式,text,Bootstrap,边框,内容,文章,col
来源： https://www.cnblogs.com/homehtml/p/11876806.html