关于前端:Bootstrap-笔记

Bootstrap 是预编写的 CSS 和 JavaScript 代码段（chunk）的汇合。

任何 Web 利用，都能够通过增加如下代码到 HTML 的 head 标签中来引入 Bootstrap。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">
  <!-- something -->
</div>

其中 rel 示意该 link 用于样式表，href 表明 Bootstrap 的地址。

或者能够把 Bootstrap 作为 JavaScript 库引入，在 body 标签底部放入 script 标签。

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

其中 src 示意 Bootstrap 的地址。

Bootstrap 会依据屏幕大小来动静调整 HTML 元素的大小————因而称为 Responsive Design（响应式设计）。

当初通过 Bootstrap，只须要为 image 标签上设置 class 属性为 img-responsive，就能够让它完满地适应页面的宽度了。

<img class="img-responsive" src="">

只须要将元素的 class 属性设置为 text-center 就能够实现。

<h2 class="text-center">CatPhotoApp</h2>

应用 text-XX 来示意文本色彩，其中 XX 和下列按钮色彩，雷同.

// Primary // blue
// Secondary // grey
// Success // green
// Danger // red
// Warning // yellow
// Info // skyblue
// Light // whie
// Dark // black
// Link // anchor

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的款式格调。

<button class="btn btn-default">Like</button> // white color

通过为按钮增加 class 属性 btn-block 使其成为块级元素，按钮会舒展并填满页面的整个程度空间，后续的元素会流到这个块级元素的下方，即 “ 另起一行 ”。

  <button class="btn btn-default btn-block">Like</button>

btn-primary class 的色彩是利用的次要色彩。这样“突出显示”是疏导用户循序渐进进行操作的无效方法。primary 被称为 modifier 修改器，因为这部分是能够改变的。

修改器扭转了组件的视觉款式。

  <button class="btn btn-primary btn-block">Like</button>
// blue color

Bootstrap 有着丰盛的预约义按钮色彩。浅蓝色的 btn-info class 通常用在备选操作上。

  <button class="btn btn-info btn-block">Info</button>
// 浅蓝

红色 btn-danger class 用来揭示用户此行为具备破坏性

<button class="btn btn-danger btn-block">Delete</button>

Bootstrap 常常应用 container 作为栅格零碎的父 / 根元素。

Bootstrap 具备一套 12 列的响应式栅格零碎，能够轻松的将多个元素放入一行并指定它们的绝对宽度。Bootstrap 的大部分 class 属性都能够利用在 div 元素上。

Bootstrap 的列宽取决于用户的屏幕宽度。比方，手机有着窄屏幕而笔记本电脑有者更大的屏幕.

就拿 Bootstrap 的 col-md-* class 来说。在这里，md 示意 medium（中等的），而 * 是一个数字，阐明了这个元素占有多少个列宽度。这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。

应用 col-xs-*，其中 xs 是 extra small 的缩写 (比方窄屏手机屏幕)，* 是填写的数字，代表一行中的元素该占多少列宽。

断点，类前缀和维度对应：

Extra small – xs – < 576px , 该项为默认值，因为 Bootstrap 是 mobile-first 的。
Small – sm – >= 576px
Medium – md – >= 768px
Large – lg – >= 992px
Extra large – xl – >=1200px
Extra extra large – xxl – >= 1400px

<div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button></div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button></div>
  </div>

应用 span 标签来创立行内元素。能够把不同的元素放在同一行，甚至能为一行的不同局部指定不同款式。

<p>Top 3 things cats <span class="text-danger">hate:</span></p>

Font Awesome 是一个十分便当的图标库。通过 webfont 或矢量图的形式来应用这些图标。这些图标就和字体一样，不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。

引入:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

i 元素本来是用来示意斜体文字内容的；不过当初，用它来示意图标也很常见。只须要为 i 元素增加相应的 class 就能够让它展现图标，比方：

<i class="fas fa-info-circle"></i>
<i class="fas fa-thumbs-up"></i> 
<i class="fas fa-trash"></i></i>

Bootstrap 的 col-xs-* class 也能够用在 form 元素上！这样就能够在不关怀屏幕大小的状况下，将的单选按钮平均的平铺在页面上。

<div class="row">
<div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Lazy</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Crazy</label></div>
    </div>

Bootstrap 的 col-xs-* 可利用于所有的 form 元素上，包含复选框！这样就能够不用关注屏幕大小，平均地把复选框放在页面上了。

<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

能够在 submit button 元素内加上 <i class="fa fa-paper-plane"></i>，来增加 Font Awesome 的 fa-paper-plane 图标。

所有文本输出类的元素如 <input>，<textarea> 和 <select> 只有设置 .form-control class 就会占满 100% 的宽度。

<input class="form-control">

<h3 class="text-primary text-center">jQuery Playground</h3>

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Bootstrap 有一个叫作 well 的 class，作用是使界面更具层次感。

<div class="well">
  </div>

记住，能够这样给一个元素设置 id：

<div class="well" id="center-well">

给右边的块设置 id 为 left-well。给左边的块设置 id 为 right-well。

关于前端:Bootstrap-笔记

Bootstrap

引入

Fluid

响应式设计 Responsive

文本

居中

色彩

按钮

块级元素按钮

按钮不同主题

可选操作款式

危险

栅格零碎

行内元素

Font-Awesome

表单

单选按钮

复选框

输入框

题目

行

Wells