Bootstrap学习笔记01【快速入门、栅格布局】

叁歲伎倆 2022-10-29 07:38 233阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Bootstrap学习笔记01【快速入门、栅格布局】][Bootstrap_01]【day01】
> 2.  [Bootstrap学习笔记02【全局CSS样式、组件和插件、案例\_黑马旅游网】][Bootstrap_02_CSS]【day01】

**目录**

01 快速入门

今日内容

Bootstrap\_概述

Bootstrap中文网

Bootstrap\_快速入门

下载 Bootstrap

Bootstrap 离线文档

Bootstrap 模板

02 Bootstrap\_栅格系统

Bootstrap\_栅格系统\_入门

Bootstrap 官网 栅格系统 文档

Bootstrap 栅格系统 基本使用

Bootstrap\_栅格系统\_注意事项

--------------------

# 01 快速入门 #

## 今日内容 ##

> 1.  Bootstrap（前端框架，定义了很多丰富的样式！编写好的CSS、JS代码，可以直接拿来使用！）

## Bootstrap\_概述 ##

> 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。  
>     \* 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。  
>     \* 好处：  
>         1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。  
>         2. 响应式布局  
>             \* 同一套页面可以兼容不同分辨率的设备。

> 把基础性的知识封装（让开发更简单）--> 提供jar包 --> 开发人员可以借助jar包快速地开发程序。--> 框架，一个半成品软件。
> 
> [Bootstrap(Web框架) - 百度百科][Bootstrap_Web_ -]
> 
> Bootstrap中文网 —— [https://www.bootcss.com][https_www.bootcss.com]

### Bootstrap中文网 ###

> Bootstrap中文网 —— [https://www.bootcss.com][https_www.bootcss.com]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

## Bootstrap\_快速入门 ##

> 快速入门
> 
> 1.  下载Bootstrap
> 2.  将这三个文件夹复制到工程文件夹下
> 3.  创建html页面，引入必要的资源文件

### 下载 Bootstrap ###

> ![2021020918513479.png][]  ![20210209185220295.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

> ![2021020918564033.png][]
> 
> ![20210209200708484.png][]  ![20210209200952556.png][]

### Bootstrap 离线文档 ###

> Bootstrap离线文档（已下载好）：没网络的时候，离线访问。
> 
> ![20210209191539519.png][] ![20210209191817529.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

<!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Bootstrap 101 Template</title>
    
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        
        
        
      </head>
      <body>
        <h1>你好，世界！</h1>
    
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </body>
    </html>

### Bootstrap 模板 ###

> ![20210209195731534.png][]
> 
> ![20210209201459401.png][]
> 
> ![20210209200027631.png][]
> 
> ![20210209201829829.png][]

# 02 Bootstrap\_栅格系统 #

## Bootstrap\_栅格系统\_入门 ##

> **响应式布局**
> 
> \* 同一套页面可以兼容不同分辨率的设备。  
> \* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。  
> \* 步骤：  
>     1. 定义容器。相当于之前的table。  
>         \* 容器分类：  
>             1. container：两边留白  
>             2. container-fluid：每一种设备都是100%宽度  
>     2. 定义行。相当于之前的tr，样式：row  
>     3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目  
>         \* 设备代号：  
>             1. xs：超小屏幕 手机 (<768px)：col-xs-12  
>             2. sm：小屏幕 平板 (≥768px)  
>             3. md：中等屏幕 桌面显示器 (≥992px)  
>             4. lg：大屏幕 大桌面显示器 (≥1200px)

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

### Bootstrap 官网 栅格系统 文档 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]

### Bootstrap 栅格系统 基本使用 ###

> ![20210209203633563.png][]
> 
> ![20210209203652199.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]

## Bootstrap\_栅格系统\_注意事项 ##

> 容器分类：
> 
> 1.  container：两边留白
> 2.  container-fluid：每一种设备都是100%宽度
> 
> 注意：
> 
> 1.  一行中如果格子数目超过12，则超出部分自动换行。
> 2.  栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
> 3.  如果 真实设备宽度 小于了 设置了栅格类属性的设备代码的最小值，会一个元素占满一整行。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]
> 
> ![20210209204500445.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Bootstrap_01]: https://blog.csdn.net/weixin_44949135/article/details/113773977
[Bootstrap_02_CSS]: https://blog.csdn.net/weixin_44949135/article/details/113775470
[Bootstrap_Web_ -]: https://baike.baidu.com/item/Bootstrap/8301528?fr=aladdin
[https_www.bootcss.com]: https://www.bootcss.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021020918412182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/d48199c4db8a44f2bad2e09ace914af1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210209184227873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/399b536b50864718a4154203cddb124e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/6e84000393894f84810b409dad5d5afb.png
[2021020918513479.png]: https://img-blog.csdnimg.cn/2021020918513479.png
[20210209185220295.png]: /images/20221024/66ca9493565745fb8bf5c16ae20bbc30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/ff9d6706825540b4ba2e5a61c888acf2.png
[2021020918564033.png]: /images/20221024/ba2609cb503a40e8917566225c6f929b.png
[20210209200708484.png]: https://img-blog.csdnimg.cn/20210209200708484.png
[20210209200952556.png]: /images/20221024/be4bff9d2c0a4a939aac18c609a92d3f.png
[20210209191539519.png]: https://img-blog.csdnimg.cn/20210209191539519.png
[20210209191817529.png]: /images/20221024/09b9f04c56a64a16844a4006cfe32db6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/8ba365cd13164b7da8a0181b280daa96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/8f924fea457747a1b8ab86af91f27ab5.png
[20210209195731534.png]: /images/20221024/a12e9aef569345a880c403845903cb04.png
[20210209201459401.png]: /images/20221024/cfb5defccb8746f59a0aef03ffaad1e1.png
[20210209200027631.png]: /images/20221024/160e17cb749947179403ae410dc2f545.png
[20210209201829829.png]: /images/20221024/ec85fa7be95b43e78e301bd571005374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/0a4ad5f764bd4bbaad273268ec9881b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210209202452703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/5a435f0a402f4179ad3d4c7eaa301bc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/2b1411d7baa74561aafdc0f6c5852c0b.png
[20210209203633563.png]: /images/20221024/bde209ed3cf745449c088c6a74a6237b.png
[20210209203652199.png]: /images/20221024/c9823a016b8b467db062086adde0097c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210209203756442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/3f166c98c1ad4eafb17ffc3c3c2dd508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/a4859193fda54736bd77f8a477dc338b.png
[20210209204500445.png]: /images/20221024/f1884c69809b4cd3b7e4bb60035f3d6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/eb1eeca04d894a3aa82890d7d1bb07ca.png