Bootstrap简要介绍

最新推荐文章于 2024-03-20 09:35:53 发布

康提扭狗兔

最新推荐文章于 2024-03-20 09:35:53 发布

阅读量498

点赞数 1

分类专栏：前端学习笔记文章标签： bootstrap 前端 css

本文链接：https://blog.csdn.net/qq_30166465/article/details/127844971

版权

前端学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

简单来说，Bootstrap是用来做UI的，适用于不会写前端界面的后端程序员
相关文档：Bootstrap中文网菜鸟教程

2 Bootstrap的使用

2.1 引入bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--设置浏览器兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
        viewport表示用户是否可以缩放页面
        width指定视区的逻辑宽度
        device-width指定视区宽度应为设备的屏幕宽度
        initial-scale指令用于设置web页面的初始缩放比例
        initial-scale=1将显示未经缩放的web文档
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--载入bootstrap的css-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!--如果要使用Bootstrap的插件，必须先调用jQuery-->
    <script src="js/jquery-3.6.1.js"></script>
    <!--包括所有的Bootstrap的js插件或者根据需要使用的js插件调用-->
    <script src="bootstrap/js/bootstrap.min.js"></script>    
    <h1>Hello,world</h1>
</body>
</html>

未引入bootstrap.min.css时的字体

引入bootstrap.min.css后

2.2 布局容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--载入bootstrap的css-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!--布局容器
        1. container类用于固定宽度并支持响应式布局的容器 即会两边留白
        2. containner-fluid类用于100%宽度，占全部视口的容器 从边缘开始不会留白
    -->
    <div class="container" style="background-color: yellow;height: 500px;">
        container类用于固定宽度并支持响应式布局的容器
    </div>
</body>
</html>

3 栅格系统

相关文档：Bootstrap中文网

列组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--载入bootstrap的css-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div style="background-color: green;">4</div>
    <div style="background-color: yellow;">8</div>
    <!--栅格网格系统
    -->
    <!--布局容器-->
    <div class="container">
        <!--行元素-->
        <div class="row">
             <!--每一列分为12等份，每一行设置加起来不能超过12-->
            <!--列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
            <div class="col-md-4" style="background-color: green;">4</div>
            <div class="col-md-8" style="background-color: yellow;">8</div>
        </div>
    </div>
</body>
</html>

媒体查询

会自动根据当前设备的屏幕选择，即自适应屏幕

<!--列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
            <div class="col-md-4 col-sm-6" style="background-color: green;">4</div>
            <div class="col-md-8 col-sm-6" style="background-color: yellow;">8</div>

列偏移

col-xx-offset-数值相当于上一个div向右偏移了多少格，仍不能超过12

<div class="container">
        <!--行元素-->
        <div class="row">
            <!--列偏移-->
            <div class="col-md-1" style="background-color: green;">1</div>
            <div class="col-md-1 col-md-offset-1" style="background-color: yellow;">1</div>
            <div class="col-md-1" style="background-color: orange;">1</div>
            <div class="col-md-1 col-md-offset-2" style="background-color: orange;">1</div>
        </div>
    </div>

列排序

如果浮动后的网格已存在元素，那么原来的就会被覆盖掉

<div class="row">
            <!--列排序-->
            <div class="col-md-1" style="background-color: green;">1</div>
            <!--向右浮动3格-->
            <div class="col-md-1 col-md-push-3" style="background-color: yellow;">1</div>
            <div class="col-md-1" style="background-color: orange;">1</div>
            <!--向左浮动2格-->
            <div class="col-md-1 col-md-pull-2" style="background-color: greenyellow;">1</div>
        </div>

列嵌套

即每个小格子类还可以分成12格

<div class="container">
        <!--行元素-->
        <div class="row">
            <div class="col-md-6" style="background-color: green;">
                <div class="row">
                    <div class="col-md-3" style="background-color: yellow;">第二次分的3</div>
                    <div class="col-md-3" style="background-color: greenyellow;">第二次分的3</div>
                </div>
            </div>
            <div class="col-md-6" style="background-color: orange;">6</div>
        </div>
    </div>