前端基础之bootstrap

学习笔记：

学习视频链接：https://www.bilibili.com/video/BV14J4114768?p=62&spm_id_from=pageDriver

---

bootstrap的使用：

1、下载bootstrap 网址：https://bootstrap.css88.com/

2、将下载好的文件复制到项目

3、使用链接引入css样式资源文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

4、测试bootstrap的使用：（bootstrap通过类名控制css样式）

<button type="button" class="btn btn-success">Success</button>

使用bootstrap的css样式成功：

bootstrap的布局容器：

1、container类：

• 响应式布局容器 固定宽度
• 大屏( >=1200px)宽度定为1170px
• 中屏( >=992px)宽度定为970px
• 小屏( >=768px)宽度定为750px
• 超小屏(100%)

2、container-fluid类：

• 流式布局容器百分百宽度
• 占据全部视口( viewport )的容器。
• 适合于单独做移动端开发

bootstrap的栅格系统：

1、栅格系统英文为“gridsystems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
2、Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport)尺寸的增加，系统会自动分为最多12列。
3、通过类前缀控制页面布局效果
eg：

 <style>
        [class^="col"] {
            border: 1px solid #000;
        }
    </style>
 <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <div class="row">
            <div class="col-lg-6">a</div>
            <div class="col-lg-2">b</div>
            <div class="col-lg-2">c</div>
            <div class="col-lg-2">d</div>
        </div>

如图所示：（大屏幕占3格，中等屏幕占4格，小屏幕占6格，超小屏幕设备占12格）

推、拉、隐藏功能：

详细查看bootstrap网址：https://bootstrap.css88.com/css/