CSS第九章移动端布局-Bootstrap

最新推荐文章于 2024-06-06 09:39:26 发布

guanerkoushi

最新推荐文章于 2024-06-06 09:39:26 发布

阅读量1k

点赞数 1

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/Xiaolei233/article/details/117600324

版权

Bootstrap

Bootstrap

Bootstrap

Bootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

好处：不需要自己写样式，它提供了大量的class样式供选择

要求：能记住基础的，其他的会查文档就行。

我下的最新版本v5.0.1，不同版本提供的内容有改变

特色：1. 响应式布局（不需要自己写media query，调用样式即可）

	 2. 基于flex的栅格系统（bootstrap中会利用flex把一行分为12列）

	 3. 丰富的组件和工具方法（实现网页中常见效果更加容易）

	 4. 常见交互使用（基于JavaScript框架-JQuery）

bootstrap.css包括bootstrap-grid.css 和 bootstrap-reboot.css

一、Layout

1. Containers

官网了解

container：版心，大小是响应式的

container-fluid：通栏

container-breakpoints：断点

在这里插入图片描述

Bootstrap中container-breakpoints的设置（class名根据设备大小有sm\md\lg\xl\xxl之分）：

<link rel="stylesheet" href="./bootstrap.css">
<div class="container">
    aaa
</div>
<div class="container-fluid">
    bbbbb
</div>

2. Grid system栅格系统

知识点：

Grid options：网格选项
Responsive classes ：响应式class
Gutters：左右间距
Alignment：对齐方式
Reordering：排序
Offsetting：偏移

例子：
栅格系统把一行分为12列，支持6种响应式断点（例如.col-sm/md/lg/xl/xxl），下图中小于576px竖着排，大于576px横着排。
在这里插入图片描述

源码中类row是display:flex; 类col是flex: 1 0 0%; 所以子元素默认平均分配。
在这里插入图片描述

<link rel="stylesheet" href="./bootstrap.css">
<style>
    [class*=col]{
      border:1px solid black;}
</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col">aaaaa</div>
            <div class="col">bbbbb</div>
            <div class="col">ccccc</div>
        </div>
        <div class="row">
            <div class="col-sm">ddddd</div>
            <div class="col-sm">eeeee</div>
            <div class="col-sm">fffff</div>
        </div>
    </div>
</body>

小于576px显示：
在这里插入图片描述

大于576px显示：
在这里插入图片描述

2.1 Grid options

在这里插入图片描述
Gutter width可通过f12查看：

2.2 Auto-layout columns

总共12列，写col会平均分配。

2.3 Equal-width

如果写四个col，就会水平排四个。想折行？方法有两种：

1.写两个row
在这里插入图片描述
2.在想折行处加一个< div class=‘w-100’>< /div>（bootstrap中将w-100视为宽度100%，所以相当于加了一个空标签）

2.4 Setting one column width 设置列宽度

第一种：
在这里插入图片描述
注：col-6代表占12列中的6列；col-5代表占12列中的5列；其余的列平均分配。

第二种：
在这里插入图片描述
注：通过col-{breakpoint}-auto类，使列宽度自适应内容。

练习：

<!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 rel="stylesheet" href="./bootstrap.css">
    <style>
        [class*=col]{
      border:1px solid black;}
    </style>
</head>
<body>
    <!-- sm、md、lg、xl、xxl -->
    <div class="container">
        <div class="row">
            <div class="col">aaaaa</div>
            <div class="col">bbbbb</div>
            <div class="w-100"></div>
            <div class="col">ccccc</div>
        </div>
        <div class="row">
            <div class="col-sm">ddddd</div>
            <div class="col-sm">eeeee</div>
            <div class="col-sm">fffff</div>
        </div>
        <div class="row">
            <div class="col-4">测试</div>
            <div class="col-4">测试文字</div>
            <div class="col-4">测试文字测试文字</div>
        </div>
        <div class="row">
            <div class="col-5">测试文字</div>
            <div class="col-5">测试文字测试文字</div>
            <div class="col-5">测试文字测试文字测试文字</div>

最低0.47元/天解锁文章

guanerkoushi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第九章移动端布局-Bootstrap

BootstrapBootstrapContainersGrid system栅格系统Grid optionsAuto-layout columnsEqual-widthSetting one column width 设置列宽度BootstrapBootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。好处：不需要自己写样式，它提供了大量的class样式供选择我下的最新版本v5.0.1，不同版本提供的内容有改变特色：1. 响应式布局（不需要自己写media q
复制链接

扫一扫