Bootstrap?

Bootstrap?

Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。如果不想写样式也可以用bootstrap来进行快速的开发。

提供大量的class样式，我们要了解这些class样式的使用核心技巧，以便来开发项目。

特色：

1. 响应式布局
2. 基于flex的格栅系统
3. 提供丰富的组件和工具方法
4. 常见交互使用

官网：https://getbootstrp.com  主要学boot4

bootstrap-4.3.1  -> dist -> css -> bootstrap.css(包含bootstrap-grid.css和bootstrap-reboot.css）

bootstrap-grid.css是格栅系统，bootstrap-reboot.css是重置样式。

 

bootstrap中css一般都是通过类名来调用样式的，常见的class类名有：

bootstrap中有关类名Containers部分

container版心（是响应式的）    container-fluid通栏   Responsive breakpoints响应式回调节点（把设备分为576px  768px等）

bootstrap中的栅格系统Grid system

Grid options（网格配置）

Responsive classes（响应式的class如何写）

Gutters（间距）

Alignment（对齐方式）

Reorddering（排序）

Offsetting（位置间距）

.....

栅格系统是12*12。默认间距为15px

col-6指当前单元格占6份。

要折行，可以通过class=”w-100”来实现

col-lg-4指lg模式下占4份

mr-auto：指margin-right:auto;

mt-5 : 指margin-top：5rem；

mt-md-5：指margin-top：5rem；  注：只有在md响应式范围内添加

mx-5：指x轴水平方向的外边距

mt-n5：指margin-top：-5rem

py-5：指y轴上的内边距即padding-top：5rem，padding-bottom：5rem；

把css以class形式来呈现，我们只需要背bootstrap的class类名就好了。

bootstrap中的内容部分Content

reboot：重置默认样式

typography：设备

code：代码

images：图片

tables：表格

figures：图片描述

text-center：指text-align：center；

position-absolute：position：absolute；

float-left：

overflow-hidden：指overflow：hidden；

float-md-left：指响应式md下的float：left；

d-block：指display：block；

bootstrap中的组件部分Components

Alerts：弹出提示

Badge：徽章

Breadcrumb：面包屑（一般指导航）

Buttons：按钮

Button group：按钮组

Card：卡片

.....

bg-primary：指background的背景颜色primary

btn-group-lg：指按钮组比默认的大large

 

可以通过下载插件bootstrap 4来快速查找bootstrap的方法 （b4-）

 

bootstrap中的工具方法部分Utilities

borders：边框

clearfix：清除浮动

close icon：关闭icon

colors: 颜色

display：显示类型

embed：媒体

......

bootstrap封装了css，我们调用class类名就行了