Bootstrap学习1

海量的海

已于 2022-11-06 22:24:28 修改

阅读量141

点赞数

文章标签： bootstrap 学习 html

于 2022-11-05 17:49:57 首次发布

本文链接：https://blog.csdn.net/m0_67538972/article/details/127706456

版权

Bootstrap

BootStrap下载

官网下载：Bootstrap中文网 (bootcss.com)

推荐用BootStrap3，比较稳定

BootStrap介绍

BootStrap是一套现成的CSS样式集合（是两个推特的员工做出来的）

BootStrap特别适合没有团队的去做易用的、灵活的页面

BootStrap特点

好用、好看、直观
响应式设计、12列格网、样式向导文档
自定义JQuery插件（BootStrap插件是基于JQuery、Less的）
丰富的组件

下载BootStrap

下载路径：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

建议下载BootStrap源码

在这里插入图片描述

下载后解压打开文件：在D:\bootstrap-3.4.1\bootstrap-3.4.1目录下直接复制dist文件夹将它放进你的项目文件中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 载入刚刚导入进来的dist包中的css -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!--如果要使用bootstrap的js插件，必须先导入jQuery包，这是我之前下好的包-->
    <script src="js/jquery-3.5.1.js"></script>

    <!--载入刚刚导入进来的dist包中的css-->
    <script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
    
</body>
</html>

JQuery安装与下载教程:(1条消息) JQuery安装与下载教程_Muchen灬的博客-CSDN博客_jquery

BootStrap在线使用

JQuery和BootStrap都有在线的使用

好处：更快更方便

坏处：要求要有网络，需要用网络加载，一般做开发都用本地文件更好

在这里插入图片描述

直接在官网上复制粘贴引入就好

布局容器和栅格网格系统

布局容器

container 类用于固定宽度的容器（就是宽度两边有留白）

 <div class="container">
		...
    </div>

container-fluid 类用于100%宽度的容器（就是屏幕占满，不留白）

<div class="container-fluid">
		...
    </div>

栅格网格系统

以下部分摘自：Bootstrap 网格系统 | 菜鸟教程 (runoob.com)

什么是网格（Grid）？

摘自维基百科：

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

注意：网络系统必须使用到css

container、row、xs（xsmall phones），sm（small tablets），md（middle desktops），lg（lager desktops）即：超小屏（自动）、小屏（750px）、中屏（970px）和大屏（1170px）
数据行（row）必须包含在容器（container）中，以便为其赋予适合的对齐方式和内距（padding）
在行（row）中可添加列（column），只有列（column）才可以作为行容器（row）的直接元素，但列数不能超过总列数：如12，超过自动换行
具体内容应当放在列（column）中

  <div class="container" style="background-color: rgb(73, 112, 29);height:100px ;">
        <div class="row">
            <div class="col-md-4" style="background-color: rgb(244, 224, 7);">占4列</div>
            <div class="col-md-8" style="background-color: rgb(245, 34, 6);">占8列</div>
        </div>
    </div>

Bootstrap 会自动根据你的屏幕大小来找寻适合的大小,如：

 <div class="container" >
        <div class="row">
            <div class="col-md-4 col-lg-4" >占4列</div>
            <div class="col-md-8 col-lg-8" >占8列</div>
        </div>
    </div>

列组合

列组合简单理解为更改数字来合并列（原则：列总和不能超过12，大于12，自动换行）

<div class="container-fluid">
          <!-- Control the column width, and how they should appear on different devices -->
          <div class="row">
            <div class="col-sm-6" style="background-color:yellow;">6</div>
            <div class="col-sm-6" style="background-color:orange;">6</div>
          </div>
          <br>
          
          <div class="row">
            <div class="col-sm-4" style="background-color:yellow;">4</div>
            <div class="col-sm-4" style="background-color:orange;">4</div>
            <div class="col-sm-4" style="background-color:yellow;">4</div>
          </div>
          <br>
      
          <!-- Or let Bootstrap automatically handle the layout -->
          <div class="row">
            <div class="col-sm-3" style="background-color:yellow;">3</div>
            <div class="col-sm-3" style="background-color:orange;">3</div>
            <div class="col-sm-3" style="background-color:yellow;">3</div>
            <div class="col-sm-3" style="background-color:orange;">3</div>
          </div>
          <br>
          
          <div class="row">
            <div class="col-3" style="background-color:yellow;">3</div>
            <div class="col-3" style="background-color:orange;">3</div>
            <div class="col-3" style="background-color:yellow;">3</div>
            <div class="col-5" style="background-color:orange;">5</div>
          </div>
        </div>

测试结果：

在这里插入图片描述

列偏移

偏移用于增加列的左边距。

例如，如果你有一个列出现在三个Bootstrap列之间，则可以使用偏移功能。

可用于偏移的类有：

col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*

假设我们要在超小显示器中向右移动一列三个Bootstrap列，我们可以使用类“col-xs-offset-2”，例如：

<div class="container-fluid">
    <div class="row">
            <div class="col-sm-5" style="background-color:yellow;">5</div>
            <div class="col-sm-4 col-sm-offset-2" style="background-color:orange;">4</div>
          </div>
   
      </div>

测试结果：

在这里插入图片描述

列排序

简单理解为列的重排序，就是将列浮动起来（push向右浮动，pull向左浮动）

<div class="container-fluid">
    <!--正常-->
          <h5>正常</h5><hr>
          <div class="row">
            <div class="col-sm-1" style="background-color:yellow;">1</div>
            <div class="col-sm-1" style="background-color:orange;">1</div>
            <div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
            <div class="col-sm-1" style="background-color:rgb(30, 255, 0);">1</div>
          </div>
          <br>
          <!--浮动-->
          <h5>浮动</h5><hr>
          <div class="row">
            <div class="col-sm-1" style="background-color:yellow;">1</div>
            <div class="col-sm-1 col-sm-push-4" style="background-color:orange;">1</div>
            <div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
            <div class="col-sm-1 col-sm-pull-2" style="background-color:rgb(30, 255, 0);">1</div>
          </div>
</div>

测试结果：

在这里插入图片描述

嵌套列

我们可以在布局中的任何列中创建一组新的12个Bootstrap列，以便创建嵌套列。

<div class="container">
    <div class="row">
        <div class="col-md-6 col1">
            <h3>Column 1</h3>
            <!-- Nesting Starts  -->
            <div class="row">
                <div class="col-md-6 col3">
                    <h3>Column 4</h3>
                </div>
                <div class="col-md-6 col4">
                    <h3>Column 5</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 col2">
            <h3>Column 2</h3>
        </div>
    </div>
</div>

海量的海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap学习1

BootStrap是一套现成的CSS样式集合（是两个推特的员工做出来的）BootStrap特别适合没有团队的去做易用的、灵活的页面摘自维基百科：在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
复制链接

扫一扫