Bootstrap

Bootstrap中所有样式给已经写好了，要想使用，直接复制粘贴即可。

 

如要改变样式，修改class值就行

一、Bootstrap简介

• Bootstrap是是一款完全开源的HTML、CSS、JS框架，让前端开发更快速、简单。
• 前端开源项目CDN加速服务
  • 稳定
  • 快速
  • 免费
• 版本问题
  • Bootstrap v3
    • 支持IE8+浏览器
    • 依赖jQuery
  • Bootstrap v4
    • 支持IE10+ 浏览器
    • 支持Flexbox布局
    • 不依赖jQuery
  • Bootstrap v5
    • 支持Flexbox布局
    • 支持Grid布局
    • 支持CSS自定义属性
    • 不依赖jQuery
    • 不支持IE浏览器

二、如何使用Bootstrap

        Bootstrap网址：Bootstrap中文网

---

        下载（2种方式）：

第一种：将Bootstrap下载到本地。下载的是压缩包，将压缩吧解压。把解压的文件夹导入到测试环境中即可。

第二种：引入外链(引入外链后直接可以使用)：

        Bootstrap核心CSS文件：

               

        Bootstrap核心JS文件：

引入地址：将外链引入到 .html文件的外链中

注意事项：

        如果是Bootstrap v3版本还需引入jQuery（可引入外链也可下载到本地）

三、全局CSS样式

        1、布局容器

                1.1、左右留白

    .....

                1.2、占据全部视口，宽度：100%

    ...

        2、栅格系统（总共12列）

/*写一个row就是将一个布局划分成12份*/







/*写一个col-md-1就是将获取想要的份数*/

        3、列偏移(col-md-offset-4)

  
.col-md-4
  
.col-md-4 .col-md-offset-4


  
.col-md-3 .col-md-offset-3
  
.col-md-3 .col-md-offset-3


  
.col-md-6 .col-md-offset-3

        4、排版

将文本样式，如：页面主体，列表等变得更加的美观

        5、表格

               5.1、基本表格

    ...

                5.2、条纹状表格

    ....

                 5.3、带边框的表格

    ....

                5.4、鼠标悬停

    ....

                 5.5、紧缩表格

    ....

                5.6、表格颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

...
...
...
...
...



  ...
  ...
  ...
  ...
  ...

        6、表单

对表单中的控件进行美化

        7、按钮

        可作为按钮使用的标签或元素：、、元素添加按钮类，即可使用Bootstrap提供的样式

Link

Button

        按钮颜色

（默认样式）Default


（首选项）Primary


（成功）Success


（一般信息）Info


（警告）Warning


（危险）Danger


（链接）Link

        8、图片

                图片形状

/*img-rounded：正方形*/

/*img-circle：圆形*/

/*img-thumbnail：边框*/

        9、图标

                图标的使用

专门图标网站：https://fontawesome.com.cn/