前端开发库_1

前言

本篇内容时关于前端开发库的一些样式简单介绍；

正文

导入Bootstrap库：

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

container-fluid类：

<div class="container-fluid">
	...
</div>
<!--div里面的内容自动适应页面宽度-->

img-responsive类：

<img src="#" class="img-responsive">
<!--是图片自动适应页面宽度-->

text-center类：

<h2 class="text-center">文字居中</h2>

接下来的一些样式都是以按钮为例，也可以是用于其他标签：

<button class="btn">按钮1</button>
<button class="btn btn-default">按纽2</button>
<button class="btn btn-default btn-block">按钮3</button>
<!--样式如下图 btn-block将button标签转换为块级元素-->

<button class="btn btn-primary btn-block">按钮4</button>
<button class="btn btn-info btn-block">按钮5</button>
<button class="btn btn-danger btn-block">按钮6</button>
<!--第二个类用来切换颜色-->

<div class="row">
  <div class="col-xs-6">
<button class="btn btn-primary btn-block">按钮7</button>
  </div>
  <div class="col-xs-4">
<button class="btn btn-info btn-block">按钮8</button>
  </div>
  <div class="col-xs-8">
<button class="btn btn-danger btn-block">按钮9</button>
  </div>
  </div>

栅格系统也就是 col-XX-X
col-xs-X 超小屏幕 手机
.col-sm-X 小屏幕 平板
.col-md-X 中等屏幕 桌面显示器
.col-lg-X 大屏幕 大桌面显示器
将每一行分成12格列宽，元素所占列宽为最后的那一位数，当剩余列宽放不下一个下一个元素时，转入下一行。要配合 class="row"的div使用;

<div class="row">
  <div class="col-xs-4">
<button class="btn btn-primary btn-block"><span class="fas fa-thumbs-up"></span> 按钮10</button>
  </div>
  <div class="col-xs-4">
<button class="btn btn-info btn-block"><span class="fas fa-info-circle"></span> 按钮11</button>
  </div>
  <div class="col-xs-4">
<button class="btn btn-danger btn-block"><span class="fas fa-trash"></span> 按钮12</button>
  </div>
  </div>

图标一般用span或者i标签来实现，使用之前需要导入相应的图标库。
导入方式如下；

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

<form action="#">
  <div class="row">
    <div class="col-xs-8">
  <input type="text" class="form-control" placeholder="你可以写点什么">
    </div>
    <div class="col-xs-4">
      <button class="btn btn-info btn-block"><span class="fas fa-paper-plane"></span> 提交</button>
    </div>
    </from>

from-control类可以将input标签转换为块级元素，从而占满一行；