【Bootstrap】＜前端框架＞Bootstrap布局容器&栅格网格系统

2024-01-21 347

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【1月更文挑战第17天】【Bootstrap】＜前端框架＞Bootstrap布局容器&栅格网格系统

一、Bootstrap概述：

英文官网：

编辑

中文官网：

编辑

Bootstrap响应式布局设计，让一个网站可以兼容不同分辨率的设备。Bootstrapt能提供很好的视觉使用体验！

下载Bootstrap：

编辑

二、Bootstrap HTML模板：

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

这是V5版本的Bootstrap

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LY6QZQpYtqgQLJeUeh2disXkUUa+fRYfq/3dxdpkU5PQZUCqg/BK4wrhQ9idOojx" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-3JyvMmfSMpWbSPyCjNwU5lHJFeswLerSwlOGCGjyuhQ+HKQNQKCbIzEgGTP1MfyY" crossorigin="anonymous"></script>
    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-sy7xrBVBIaMK3slILGYC/U63fKx1UrfD8TRvvm7ofBK58y8tUNR4GWLKo+k+Yx8K" crossorigin="anonymous"></script>
    -->
  </body>
</html>

这是V3版本的Bootstrap：

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- X-UA-Compatible来设置IE浏览器兼容模式，最新的渲染模式 -->
    <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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</html>

三、布局容器和栅格网格系统：

1.布局容器：

.container 用于固定宽度并支持响应式布局的容器：

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

.container-fluid 用于100%宽度，占据全部视口（viewport）的容器：

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

2.栅格网格系统：

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分24份或者32份，但是12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的相应式网格系统。Bootstrap框架中的网格系统就是将容器平分成为12份。

编辑

注意：使用网格系统必须使用到CSS，引入Bootstrap的CSS文件

container、row、xs（xsmall phones）、sm（small tables），md（middle desktops），lg（larger desktops）即：超小屏（自动），小屏（750px），中屏（970px），大屏（1170px）

数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）

在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。

具体内容应当放置在列容器（column）之内：

<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: blueviolet;">4列</div>
        <div class="col-md-8" style="background-color: cadetblue;">8列</div>
    </div>
</div>

编辑

2.1 媒体查询：

Bootstrap会根据当前屏幕尺寸动态调整CSS中编写的尺寸样式！

编辑

2.2 栅格参数：

编辑

2.3 列组合：

列组合简单理解就是改变数字来合并列（原则：列总和数不能超过12，大于12，则自动换到下一行），类似于表格的colspan属性：

<div class="container">
      <div class="row">
        <div class="col-md-4" style="background-color: blueviolet;">4列</div>
        <div class="col-md-8" style="background-color: cadetblue;">8列</div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-3" style="background-color: blueviolet;">3列</div>
        <div class="col-md-3" style="background-color: cadetblue;">3列</div>
        <div class="col-md-3" style="background-color: rgb(255, 0, 0);">3列</div>
      </div>
      <hr>
      <!-- 超过12列，则会出现换行！！！ -->
      <div class="row">
        <div class="col-md-8" style="background-color: blueviolet;">8列</div>
        <div class="col-md-8" style="background-color: cadetblue;">8列</div>
      </div>
    </div>

编辑

2.4 列偏移：

如果我们不希望相邻的两个列紧靠在一起，但是又不想使用margin或者其它的技术手段。这个时候可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名" col-md-offset-* "（其中星号代表要偏移的列组合），那么具有这个类名的列就会向右偏移。但是需要保证列与偏移列总数不超过12，不然会导致列断行（换行显示）

<div class="container">
      <div class="row">
        <div class="col-md-1" style="background-color: cornflowerblue;">1列</div>
        <div class="col-md-2" style="background-color: rgb(123, 255, 0);">2列</div>
        <!-- 这里有一个8列的列偏移 -->
        <div class="col-md-1 col-md-offset-8" style="background-color: rgb(0, 89, 255);">1列</div>
        <!-- 由于上面的已经满足12列，所以这一列被换行显示 -->
        <div class="col-md-1" style="background-color: rgb(221, 0, 255);">1列</div>
      </div>
    </div>

编辑

2.5 列排序：

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名" col-md-push-* " 和 " col-md-pull-* " （其中星号代表移动的列组合数），往前pull，往后push

<div class="container">
      <div class="row">
        <div class="col-md-6" style="background-color: cornflowerblue;">6列</div>
        <!-- col-md-pull-4：向前浮动4列 -->
        <div class="col-md-3 col-md-pull-4" style="background-color: cyan;">3列</div>
      </div>
    </div>
  </body>

编辑

2.6 列嵌套：

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

编辑

【Bootstrap】＜前端框架＞Bootstrap布局容器&栅格网格系统

一、Bootstrap概述：

下载Bootstrap：

二、Bootstrap HTML模板：

三、布局容器和栅格网格系统：

1.布局容器：

2.栅格网格系统：

2.1 媒体查询：

2.2 栅格参数：

2.3 列组合：

2.4 列偏移：

2.5 列排序：

2.6 列嵌套：

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

【Bootstrap】＜前端框架＞Bootstrap布局容器&栅格网格系统

一、Bootstrap概述：

下载Bootstrap：

二、Bootstrap HTML模板：

三、布局容器和栅格网格系统：

1.布局容器：

2.栅格网格系统：

2.1 媒体查询：

2.2 栅格参数：

2.3 列组合：

2.4 列偏移：

2.5 列排序：

2.6 列嵌套：

热门文章

最新文章

相关课程

相关电子书