Bootstrap使用总结

╰+哭是因爲堅強的太久メ 2022-12-02 00:49 185阅读 0赞

# Bootstrap #

**MySql的语法看这篇就够了，传送地址：[MySql必知必会][MySql]  
JSP的使用看这篇就够了，传送地址：[JSP必知必会][JSP]**

### 文章目录 ###

*  Bootstrap
 *   *  一、概念
     *  二、使用步骤
     *  三、响应式布局
     *  四、Bootstrap的使用

## 一、概念 ##

1.Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架

2.好处：  
(1) 定义了很多CSS样式和JavaScript插件，开发人员可以直接使用这些样式和插件制作页面  
(2) 采用响应式布局：一个页面可以兼容不同分辨率的设备(电脑、平板、手机等)

## 二、使用步骤 ##

1.  下载Bootstrap，得到bootstrap-3.3.7-dist文件夹，其中有三个文件夹  
    ![在这里插入图片描述][20200828155432668.png_pic_center]  
    ![在这里插入图片描述][20200828155437206.png_pic_center]
2.  将这三个文件夹复制到项目中
3.  创建HTML页面，使用标签引入上述三个文件夹中必要的内容

代码演示：Bootstrap的基本使用 注意：使用Bootstrap时都必须以此页面为基础

<!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>此处定义标签页名称</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        
    </head>
    <body>
    </body>
    </html>

## 三、响应式布局 ##

1.  概念：同一套页面可以兼容不同分辨率的设备
2.  实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子，不论哪种设备 上都是一行有12个格子，如同一个大小的图片，在电脑端可能占4个格子即可显示，而 在手机端可能占12个格子才可以显示
3.  步骤：(1) 定义容器：
    
      
    ①container：两边留白  
    ②container-fluid：每一种设备都是100%宽度，两边不留白  
    (2) 定义行：
    
      
    (3) 定义元素：
    
    xxx
    
      
    ①即指定元素在不同的设备上所占的格子数目：col-设备代号-格子数目(取值1-12)  
    ②设备代号：  
    ![在这里插入图片描述][20200828155502630.png_pic_center]  
    代码演示：响应式布局的基本使用

<body>
        
        <div class="container">
            
            <div class="row">
                
                
                <div class="col-lg-3 col-sm-4">栅格</div>
                <div class="col-lg-3 col-sm-4">栅格</div>
                <div class="col-lg-3 col-sm-4">栅格</div>
                <div class="col-lg-3 col-sm-4">栅格</div>
            </div>
        </div>
    </body>

运行结果：(1)  
![在这里插入图片描述][20200828155516266.png_pic_center]

运行结果：(2)  
![在这里插入图片描述][20200828155520977.png_pic_center]

注意：

1.  一行中如果格子数目超过12，则超出部分自动换行
2.  栅格类属性可以向上兼容，栅格类适用于大于或等于屏幕宽度分界点大小的设备
3.  如果真实设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素占满一整行

## 四、Bootstrap的使用 ##

基于Bootstrap的基础页面，到Bootstrap的官网依据官网提供的对应样式的代码进行复制粘贴，然后进行修改成为自己想要的页面样式，也可通过下载的离线文档的v3.bootcss.com文件夹下的index.html页面本地离线访问官网

[MySql]: https://blog.csdn.net/weixin_49343190/article/details/107313699
[JSP]: https://blog.csdn.net/weixin_49343190/article/details/107932765
[20200828155432668.png_pic_center]: /images/20221123/1deee055e1134e18bdf4e94dd663951d.png
[20200828155437206.png_pic_center]: /images/20221123/613a27ec244f4f9a92e6fae9ed217487.png
[20200828155502630.png_pic_center]: /images/20221123/3f192ed7faaa40cc87c9c5fbbe9ab6c1.png
[20200828155516266.png_pic_center]: /images/20221123/5d3dd732f6384c508b88496773a23329.png
[20200828155520977.png_pic_center]: /images/20221123/60cc4817650646e8aa06b16a8d605bd7.png