Bootstrap使用总结

作者：2023面试高手 | 2024-02-18 21:52:22

踩

Bootstrap使用总结

Bootstrap

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

文章目录

Bootstrap

一、概念

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

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

二、使用步骤

下载Bootstrap，得到bootstrap-3.3.7-dist文件夹，其中有三个文件夹
将这三个文件夹复制到项目中
创建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">
    <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后 -->
    <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>
    <!--上述三个标签的href、src属性写导入的三个文件夹中指定内容的位置-->
</head>
<body>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、响应式布局

概念：同一套页面可以兼容不同分辨率的设备
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子，不论哪种设备上都是一行有12个格子，如同一个大小的图片，在电脑端可能占4个格子即可显示，而在手机端可能占12个格子才可以显示
步骤：(1) 定义容器：

①container：两边留白
②container-fluid：每一种设备都是100%宽度，两边不留白
(2) 定义行：

(3) 定义元素：
xxx

①即指定元素在不同的设备上所占的格子数目：col-设备代号-格子数目(取值1-12)
②设备代号：

代码演示：响应式布局的基本使用

<!--页面其余标签都是基于上述Bootstrap基础页面-->
<body>
    <!--1.定义容器-->
    <div class="container">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素-->
            <!--在电脑的一行上显示4个"栅格"，在平板上一行显示3个"栅格"-->
            <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行结果：(1)
在这里插入图片描述

运行结果：(2)
在这里插入图片描述

注意：

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

四、Bootstrap的使用

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/110789