前端组件Bootstrap4(学习笔记一)

Hello, 大家好，今天要分享的文章仍然是关于前端的，为什么迟迟没有关于Android相关的文章呢，其实这个公众号一开始，我就有明确的表示，它不仅仅局限于Android,我希望它可以博采众长，以Android为主，其它技术为辅，夹杂一些社会百态，人生杂谈，虽然看起来没有主题，但我觉得，这便是主题，起码说不单一，不乏味，你说呢？

当然，很长时间不发Android相关的文章最大的原因是：

哈哈~，这是逗大家的，一个Gooogle为后台的语言，我相信它的未来肯定是前途无限，好了，来看今天的主题吧——Bootstrap4。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集，对于它而言，是用于开发响应式布局、移动设备优先的 WEB 项目。

具体的安装使用，我还是建议大家，使用cdn,还是那句话，不为别的，就是为了简单，使用cdn，具体地址如下：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

如果你想下载，具体下载地址可以去官网下载：https://getbootstrap.com/

好了，下载好之后，或者使用了cdn,那么我们就可以实现我们要实现的功能了，Bootstrap4具体实现，是要把所有的标签语言放到一个容器里，就和Vue.js一样，被一个盒子封住，Bootstrap4提供了两个class,一个是全屏，一个是非全屏：

• 1、.container 类用于固定宽度并支持响应式布局的容器。

• 
  

• 2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

有了容器，那么我们就可以在容器里写标签了，这一篇文章就先从最简单的文字排版走起。

大标题

未接触Bootstrap4之前，我们所写的标题都是采用h系列，即h1到h6,可是这些标题有时候我们还感觉小怎么办，当然了我们可以使用font-zize,去改变字的大小，但是，有了Bootstrap4，我们只需要设置对应的class就ok了。

<div class="container">
    <h1 class="display-1">我是最大的字体</h1>
    <h1 class="display-1">我是第二大的字体</h1>
    <h1 class="display-3">我是第三大的字体</h1>
    <h1 class="display-4">我是第四大的字体</h1>
</div>

这里需要解释一下，可能刚了解的人有些许疑问，为什么display只有1-4，如果大于或者小于，会怎么样，这个问题大家可以看下源码，Bootstrap4只有这四个尺码，大于或者小于只会显示标签的默认字号，比如，你用的是h1，那么就会显示h1的尺码，对于这个class，你可以用很多标签来使用它，并不仅仅局限于h1，h系列，p，span……等都可以的。

<div class="container">
    <p class="display-1">我是最大的字体</p>
    <span class="display-1">我是第二大的字体</span>
    <div class="display-3">我是第三大的字体</div>
    <strong class="display-4">我是第四大的字体</strong>
    <!-- ………………等 -->
</div>

code代码

有时候，我们会去刻意的显示，一个代码或者标签，这里我们就可以使用code标签：

<div class="container">
  <code>p</code>标签代表的是一个段落<br/>
  <code>div</code>是一个容器<br/>
  <code>blockquote</code>是一个块级元素
</div>

文本样式（加粗，倾斜，对齐样式）

关于加粗，倾斜，等文本样式，这里我列个表，方便大家查阅：

类名	描述
.font-weight-bold	加粗文本
.font-weight-normal	普通文本
.font-weight-light	更细的文本
.font-italic	斜体文本
.lead	让段落更突出
.small	指定更小文本 (为父元素的 85% )
.text-left	左对齐
.text-center	居中
.text-right	右对齐
.text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	将所有列表项放置同一行
.pre-scrollable	使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

<div class="container">
 <p class="font-weight-bold">
     我是粗体字
 </p>
 <p class="font-weight-normal">
        我是普通文本
 </p>
 <p class="font-weight-light">
        我是更细的文本
 </p>
 <p class="font-italic">
        我是斜体
 </p>
 <p class="text-left">
        我是居左的字体
 </p>
 <p class="text-center">
        我是居中的字体
 </p>
 <p class="text-right">
        我是居右的字体
 </p>
</div>

其它拓展（pre,kbd,abbr,mark ……）

显示键盘快捷键，或者键盘，那么就可以使用kbd:

<div class="container">
    <kbd>command+d</kbd><br/>
    <kbd>control+s</kbd><br/>
    <kbd>control+alt+shift</kbd><br/>
</div>

我想着pre在这里就不要多言了吧，毕竟它和html中的pre是一样的，作用就是显示原有的样式，下面我们看下，abbr和mark:

<div class="container">
   <abbr title="让你看,你还真看啊">你把鼠标放到我身上就可以看到你想看到的</abbr><br/>
    <mark>我是自带光环的字体</mark>
</div>

总结：

这一篇文章，是一个入门篇，主要是Bootstrap4的一些文本信息的用法，下一篇，我们就要进入，Bootstrap4用的最多的几个关键词，只要掌握了一种，那么其他的就会迎刃而解。