【BootStrap入门级教程】初识BootStrap框架

世人万千丶

已于 2023-09-27 09:51:15 修改

阅读量191

点赞数

分类专栏： BootStrap 文章标签： bootstrap 前端 html

于 2023-09-20 10:18:16 首次发布

本文链接：https://blog.csdn.net/qq_39088168/article/details/133067355

版权

BootStrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

1、初识BootStrap

1.1 BootStrap受欢迎原因

快速制作响应式的网页来适配各种终端(*)
开发简单、方便
移动先行(*)
代码开源
代码有良好的规范

1.2 BootStrap的使用场景

响应式页面
移动端页面
后台管理页面
带有交互效果的页面

1.3 Bootstrap移动端及浏览器的支持

注意：不支持Internet Explorer，如果需要Internet Explorer支持，请使用Bootstrap v4+。

1.4 引入BootStrap

开发工具（VSCode）

官网：https://v5.bootcss.com/

中文网址：https://bootstrapdoc.com/

引入在线BootStrap框架文件

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

引入本地BootStrap框架文件，需要官网先下载

<link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.bundle.js"></script>

1.5 BootStrap架构

2、浮动和百分比网页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.min.css">
    <script src="../bootstrap.bundle.js"></script>
    <style>
        .d {
            float: left;
            width: 50%;
        }
    </style>
</head>

<body>
    <div>
        <div class="bg-info d">
            白日依山尽
            黄河入海流
            欲穷千里目
            更上一层楼
        </div>
        <div class="bg-danger d">
            床前明月光
            疑是地上霜
            举头望明月
            低头思故乡
        </div>
    </div>
</body>

</html>

3、BootStrap响应式

断点：响应式设计的基础，能够决定在不同尺寸下展示不同的布局

使用媒体查询来构建CSS

移动优先，响应式设计是目标

容器：

.container：在576px以下，宽度百分百，大于这个的，根据不同的断点，固定尺寸

.container-fluid：流式容器，在任何尺寸都是100%

.container-断点后缀(sm md lg...)：尺寸小于断点尺寸时，宽度永远100%，大于等于的时候，同.container一样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap.min.css">
    <script src="../bootstrap.bundle.js"></script>
</head>

<body>
    <!-- .container小于小屏幕sm的临界点时，宽度100%，其他的都是固定宽度 -->
    <div class="bg-danger container">
        这是一个容器
    </div>
    <!-- .container-fluid流式容器，任何尺寸都是100% -->
    <div class="bg-info container-fluid">
        这也是一个容器
    </div>
    <!-- .container-断点后缀sm  md  lg... 
        小于指定的断点才是100%，其他情况同.container一致        
    -->
    <div class="bg-success container-sm">
        这还是一个容器
    </div>

</body>

</html>

4、栅格布局

原理：

网页平分为12份

调整内外边距

结合媒体查询

列偏移：

offset-1 2 3 4 ... 11

当前列col向右偏移指定份数

示例1：栅格布局

<div class="container">
        <!-- 列组合 -->
        <div class="row">
            <div class="col-2 bg-info">第1列</div>
            <div class="col-4 bg-danger">第2列</div>
            <div class="col-6 bg-success">第3列</div>
        </div>
        <!-- 列偏移 -->
        <div class="row">
            <div class="col-2 bg-danger">第1列</div>
        </div>
        <div class="row">
            <div class="col-2 offset-2 bg-info">偏移列</div>
        </div>

        <!-- 列嵌套 -->
        <div class="row">
            <div class="col-6 bg-success p-1">
                <div class="row">
                    <div class="bg-warning col-2">1</div>
                    <div class="bg-info col-2">2</div>
                </div>
            </div>
            <div class="col-6 bg-info">第2列</div>
        </div>

        <!-- 列排序 -->
        <div class="row">
            <div class="col-2 bg-info order-3">第1列</div>
            <div class="col-4 bg-danger order-1">第2列</div>
        </div>

    </div>

示例2：栅格布局响应式


<div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 bg-info">第1列</div>
            <div class="col-lg-8 col-md-6 col-sm-12 bg-danger">第2列</div>
        </div>
    </div>

好了，大家赶快去试试吧😄

能够给大家带来价值的话，给个三连哦😘

祝各位看官万福金安😊

⭐️徒手摘星，爱而不得，世人万千，再难遇我。⭐️

世人万千丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【BootStrap入门级教程】初识BootStrap框架

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
复制链接

扫一扫