一、BootStrap

简洁、直观、强悍的前端开发框架，让web开发更加迅速、简单

中文镜像网站：http://www.bootcss.com

用于开发响应式布局、移动设备优先的WEB项目

1、使用boot

创建文件夹，在文件夹中创建js和css文件夹，把boot中的js和css文件，分别放入

二、全局CSS样式

按钮

1rem=16px

1、不同颜色的按钮

<h3>按钮相关样式</h3>
        <input type="button" value="普通按钮" class="btn">
        <input type="button" value="危险红色" class="btn btn-danger">
        <input type="button" value="成功绿色" class="btn btn-success">
        <input type="button" value="警告黄色" class="btn btn-warning">
        <input type="button" value="信息蓝色" class="btn btn-info">
        <input type="button" value="主要" class="btn btn-primary">
        <input type="button" value="次要" class="btn btn-secondary">
        <input type="button" value="深色" class="btn btn-dark">
        <input type="button" value="浅色" class="btn btn-light">

2、不同边框的按钮

<h3>不同边框的按钮</h3>
        <button class="btn btn-outline-danger">红色边框</button>
        <button class="btn btn-outline-success">绿色边框</button>
        <button class="btn btn-outline-warning">警告边框</button>

等等等。。。

3、不同按钮的大小

<h3>不同尺寸的按钮</h3>
        <button class="btn btn-danger btn-lg" >大按钮</button>
        <button class="btn btn-danger btn-sm">小按钮</button>
        <button class="btn btn-danger btn-block">块状按钮</button>

图片

<img src="banner1.png" class="img-thumbnail" alt="">//缩略图
        <img src="banner1.png" class="rounded" alt="">//圆角
        <img src="banner1.png" class="rounded-circle" alt="">圆角50%
        <img src="banner1.png" class="img-fluid" alt="">响应式图片，能缩放，不能缩小

文字

字体颜色：

text-danger/success/info/primary/warning..

字体粗细：

font-weight-bold/light/normal

文字对齐方式

text-left/right/center/justify

大小写/首字母大写

text-uppercase/lowercase/capitalize

字体大小 .h1~.h6

wytao1995

BootStrap