关于BootStrap4

BootStrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架
提供高质量的HTML、CSS以及JavaScript，让我们的web工程项目变得无比简单，包括官方的CDN启动器服务。

浏览器与设备兼容

支持的浏览器

BootStrap几乎支持所有主流操作系统上个浏览器的最新稳定版本
支持列表：

支持移动设备

BootStrap支持主流移动OS的默认浏览器的最新版本
支持列表

支持桌面浏览器

支持大多数桌面浏览器的最新版本
支持列表

快速上手BootStrap4

基本模板

<!doctype html>
<html lang="en">
<head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Hello, world!</title>
</head>
<body><h1>Hello, world!</h1><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

使用注意

HTML5 doctype头部规范
HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真
```
<!doctype html>
<html lang="zh-cn">
...
</html>
```
响应式meta标签
为了确保所有的设备的渲染和触摸效果，必须在网页的区添加响应式的视图标签
```
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```
盒尺寸
为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，将全局box-sizing的值由默认的content-box重定义为border-box，以保证padding不会影响元素的最后计算宽度。
恢复原尺寸
```
.selector-for-some-widget {box-sizing: content-box;
}
```

容器（Container）

概念

Container容器是窗口布局的最基本元素，BootStrap推荐所有样式都定义在.container或.container-fluid容器之中
这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口
图示

实操

container：流式容器，自适应大小。
container-fluid：固定宽度容器，始终100%。

可以用媒体查询自定义container：

@media (max-width: 575px) {.container-self{background-color: red;width: 100%;}}/*小屏幕*/@media (min-width: 576px) and (max-width: 767px){.container-self{background-color: green;width: 540px;}}/*中等屏幕*/@media (min-width: 768px) and (max-width: 991px){.container-self{background-color: blue;width: 720px;}}/*大屏幕*/@media (min-width: 992px) and (max-width: 1199px){.container-self{background-color: purple;width: 960px;}}/*超大屏幕*/@media (min-width: 1200px){.container-self{background-color: goldenrod;width: 1140px;}}

栅格系统

概念

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)
支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

原理

栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container作为父盒子
内部由行（.row）和列（.col）组成
① 每列都有水平的padding值，行则用于控制它们之间的间隔
② 同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验
网页开发者的呈现内容必须放置在列（.col-*）中，而且只有列可以是行的直接子元素，否则都是违法的，不可以在.col-*以上添加呈现内容
.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4
.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

栅格选项

图示
使用

对齐方式

垂直对齐

align-items-start
align-items-center
align-items-end

水平对齐

justify-content-start
justify-content-center
justify-content-end
justify-content-around
justify-content-between

网页开发者的呈现内容必须放置在列（.col-*）中，而且只有列可以是行的直接子元素，否则都是违法的，不可以在.col-*以上添加呈现内容
.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4
.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

间隙沟槽(gutters)清除

概念
BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

使用

<div class="container"><div class="row align-items-center no-gutters"><div class="col-md-3">第一部分</div><div class="col-md-3">第二部分</div><div class="col-md-3">第三部分</div><div class="col-md-3">第四部分</div></div>
</div>

排序和偏移

Class顺序重定义
1）使用 .order-* class选择符，可以对DIV空间进行可视化排序
2）系统提供了.order-1到.order-12，12个级别的顺序，在五种浏览器和设备宽度上都能生效
偏移
1）使用响应式的.offset-*栅格偏移方法
常用
2）使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具
不常用

内容

标题

兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现
CSS选择器也支持以.h1 – .h6 方式引用
注意：不会被视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注）
自定义标题备注：text-muted

显式标题

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead中心内容
通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。
code显示代码
```
<code>JavaScript</code>
```

图片

概念
BootStrap为图片添加了轻量级的无干扰样式和响应式行为，因此引用图片可以更加方便且不会轻易撑破其它元素
响应式图片
① 在Bootstrap中，给图片添加.img-fluid样式
② 定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放
缩略图处理
使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式
图像对齐处理
Picture标签
① 概念
HTML5标准提供了一个全新的<picture> 元素，它可以为 <img>指定多个<source> 定义，请确保在<img> 标签里使用使用.img-* CSS样式进行定义绑定，而不是仅仅认为引用了<img> 就达成了
② 使用
<pictrue>元素可实现图片在不同屏幕下的针对性响应式
```
<picture><source srcset="img/s1.jpg"  media="(min-width: 900px)" ><source srcset="img/s2.jpg"  media="(min-width: 700px)"><source srcset="img/s3.jpg" media="(min-width: 500px)"><img src="img/timg.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>
```

表格

组件

配置自定义按钮

网址

代码

.btn-lk {color: #ffffff;background-color: #8330F0;border-color: #9318F2;
}.btn-lk:hover,
.btn-lk:focus,
.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {color: #ffffff;background-color: #9146F2;border-color: #9318F2;
}.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {background-image: none;
}.btn-lk.disabled,
.btn-lk[disabled],
fieldset[disabled] .btn-lk,
.btn-lk.disabled:hover,
.btn-lk[disabled]:hover,
fieldset[disabled] .btn-lk:hover,
.btn-lk.disabled:focus,
.btn-lk[disabled]:focus,
fieldset[disabled] .btn-lk:focus,
.btn-lk.disabled:active,
.btn-lk[disabled]:active,
fieldset[disabled] .btn-lk:active,
.btn-lk.disabled.active,
.btn-lk[disabled].active,
fieldset[disabled] .btn-lk.active {background-color: #8330F0;border-color: #9318F2;
}.btn-lk .badge {color: #8330F0;background-color: #ffffff;
}

实例：利用BootStrap制作全平台响应式站点

BootStrap：基础学习相关推荐

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
bootstrap基础学习四篇
bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...
bootstrap基础学习十一篇
bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...
bootstrap基础学习十篇
bootstrap字体图标(Glyphicons) a.什么是字体图标字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...
ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
第四课 k8s网络基础学习-DNS和DHCP学习
第四课 k8s网络基础学习-DNS和DHCP学习 tags: k8s网络 DNS DHCP 文章目录第四课 k8s网络基础学习-DNS和DHCP学习第一节 DNS介绍第二节 DNS的linux使 ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...
第87节：Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ? : write less do more 写更少的代码,做更多的事找出所有兄弟: $("div" ...
BootStrap基础教程系列-李游Leo-专题视频课程
BootStrap基础教程系列-138人已学习课程介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaSc ...

BootStrap：基础学习

关于BootStrap4

浏览器与设备兼容

支持的浏览器

支持移动设备

支持桌面浏览器

快速上手BootStrap4

基本模板

使用注意

容器（Container）

概念

实操

栅格系统

概念

原理

栅格选项

对齐方式

间隙沟槽(gutters)清除

排序和偏移

内容

标题

图片

表格

组件

配置自定义按钮

代码

实例：利用BootStrap制作全平台响应式站点

BootStrap：基础学习相关推荐

最新文章

热门文章