BOOTSTRAP

作者：Jason199

2022 年 7 月 01 日
本文字数：2523 字
阅读完需：约 8 分钟

bootstrap

基于类名的前端 UI 框架

由类名决定样式的一套 css 文件

下载: 直接官网下载：v3.bootcss.com/getting-sta…

使用:

1. 保证 css 和 fonts 和 js 文件夹结构不要变，

2. 把 bootstrap.css 或者 bootstrap.min.css 引入就可以了

3.拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中

基本模板

bootstrap 官网提供了一套模板来帮助大家更好的学习，我复制下来了方便大家更好的阅读，当然我更希望你们自己能亲自动手去操作一下，

<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <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.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>你好，世界！</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->    <script src="https://cdn.jsdelivr.cn/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>  </body></html>

复制代码

响应式布局

一套网站, 再 PC 端和移动端都能看

但是 PC 端和移动端看到的不一样

一个 div 盒子, 再不同的屏幕尺寸下显示的大小不一样

这里简单介绍一下屏幕分类

1. 1200 以上大屏

2. 992 ~ 1200 中屏

3. 768 ~ 992 小屏

4. 768 以下超小屏

布局容器

container

响应式版心

注意: 左右自带 15px 的 padding

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

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

复制代码

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

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

复制代码

栅格布局 layout

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

1. row

行, 为了抵消 15px 的 padding，自带 margin: -15px

每一个 row 类名自带 display: block

注意：必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2. col-xx-n

列, 为了分布内容

n 表示占 12 分之几

col 把自己的父元素分成 12 份

<div class="container">    <div class="row">      <div class="col-md-6">6列</div>      <div class="col-md-7">7列</div>    </div></div>

复制代码

3. col-md-offset-n 列偏移

有时我们看到相邻的两个列靠一起，又不想使用其他的技术手段来撑开两个盒子。这个时候就用到了列偏移（offset）功能。使用列偏移也非常简单，只需要在列元素上添加类名"col-md-offset-n"(其中 n 代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加"col-md-offset-5"，表示该列向右移动 5 个列的宽度(要保证列与偏移列的总数不超过 12，不然会致列断行|换行显示)。

<div class="container">    <div class="row">      	<div class="col-md-1">1列</div>      	<div class="col-md-1">2列</div>      	<div class="col-md-1 col-md-offset-5">8列</div>      	<div class="col-md-1">12列</div>	</div></div>

复制代码

4. hidden-xx 列隐藏

xx 表示再哪一种屏幕下

lg 大屏 1200 以上

md 中屏 1200 ~ 992

sm 小屏 992 ~ 768

xs 超小屏 768 以下

5. h1 ~ h6

不再是标签名, 是类名, 表示文字大小

对齐效果

在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。

常用的对齐方式：

左对齐：left

居中对齐：center

右对齐：right

两端对齐：justify

Bootstrap 通过定义四个类名来控制文本的对齐风格：

左对齐：.text-left

居中对齐：.text-center

右对齐 .text-right

两端对齐 .text-justify。

这样做的好处就是减少了一定代码量，更加方便使用。

6. 单词表示颜色

default 默认颜色

warning 警告黄色

danger 报错红色

info 信息蓝色

success 成功绿色

使用方法： text-xx btn-xx

7. 表示大小单词

lg 表示大号

md 表示中号(标准号)

sm 表示小号

xs 表示超小号

bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/541873a9e369580b69413abc1】。

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

发布

暂无评论

创作场景

BOOTSTRAP

基本模板

响应式布局

栅格布局 layout

对齐效果

Jason199

评论