bootstrap前端开发框架

曹莓奶昔

已于 2022-07-05 22:33:34 修改

阅读量710

点赞数 1

分类专栏：移动端文章标签： bootstrap javascript html

于 2022-05-26 09:26:16 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/124972312

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3.1.2 contain-fluid 类

1. bootstrap 简介

bootstrap 来自Twitter （推特），他是基于HTML、CSS、JavaScript的，使web开发更加快捷

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)

1.1 优点

标准化的html+css编码规范
提供一套简洁、直观的组件
不断迭代更新
响应式布局

1.2 版本

3.x.x：放弃ie6-7，对ie8支持但界面效果不好，偏向于开发响应式、移动设备优先的web项目

4.x.x：放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器，Bootstrap.min.css 的体积减少了40%以上。

5.x.x：最新版，最新稳定版本浏览器，但不支持 Internet Explorer 11 及以下版本，主要区别在于 Bootstrap5 不再依赖 jQuery，使用了原生的 JavaScript

2. bootstrap 使用

创建文件夹结构
创建html骨架结构
引入相关的样式文件
书写内容

2.1 引入相关样式文件

<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 
<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

3.布局容器

3.1 container 类

bootstrap 为页面内容和栅格系统包裹的一个.container容器，.container 类用于固定宽度并支持响应式布局的容器

3.1.1 containner类

注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

3.1.2 contain-fluid 类

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，适合单独做移动端开发

4. 栅格系统（网格系统）

网格系统会随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

bootstrap 里面contain宽度是固定的，但是不同屏幕下，contain的宽度不同

4.1 网格系统的使用

4.1.1 栅格选项参数

参数通过行和列的组合来创建页面布局

行row必须放在contain 布局容器里面
实现列的划分，给列添加类前缀
如果孩子的份数相加等于12，则孩子占满contain的宽度
如果孩子份数相加小于12，则不会占慢宽度
如果孩子份数大于12，则多出的列数会另起一行显示
可以同时为一列指定多个设备的类名，以便划分不同的份数，如 col-lg-3 col-sm-3

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    .row div {
        border: 1px solid red;
    }
</style>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
            <div class="col-xxl-3">1</div>
        </div>
        <div class="row">
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
        </div>
        <div class="row">
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-7">2</div>
        </div>
    </div>
</body>

</html>

效果：

4.1.2 列嵌套

栅格系统将内容再次嵌套，可以使用一个新的.row元素，和一系列.col-cm-*元素

加row可以取消父元素的padding值，高度和父级一样

4.2 列偏移

使用 offset-md-*类可以将列向右侧偏移，实际是使用*选择去为当前元素添加左侧的边距

<!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>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        .col-sm-4 {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- 列偏移 -->
    <div class="container">
        <div class="row">
            <div class="col-sm-4">1</div>
            <div class="col-sm-4 offset-sm-4">2</div>
        </div>
    </div>
</body>

</html>

一个盒子，也可以用列偏移实现水平居中的效果

4.3 列排序

.col-md-push-* 向左拉

.col-md-pull-* 向右推

上面两个类可以改变列的顺序

4.4 响应式工具

.d-*-none 类为元素添加类 d-none，将在所有设备中隐藏该元素如 .d-sm-none

当设置了小屏幕隐藏之后，默认小屏幕以及之上的所有屏幕都会默认隐藏。所以添加d-*-block进行显示操作

曹莓奶昔

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap前端开发框架

1. bootstrap 简介bootstrap 来自Twitter （推特），他是基于HTML、CSS、JavaScript的，使web开发更加快捷Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)1.1 优点标准化的html+css编码规范提供一套简洁、直观的组件不断迭代更新1.2 版本3.x
复制链接

扫一扫

专栏目录