一、网址
二、前提
<!--HTML5头部规范 doctype声明,否则有可能失真-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!-- 为了确保所有设备的触摸和渲染效果,需要添加响应式视图标签-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 样式-->
<link rel="stylesheet" href="../css/bootstrap.css">
<title>初体验</title>
<!-- 还原盒模型(如果需要的话),bootstrap默认是自己改过的,确保padding不会影响元素的最后计算宽度-->
<style>
.selector-for-some-widget{
box-sizing: content-box;
}
</style>
</head>
<body>
<h1>第一次</h1>
<!-- jQuery-->
<script src="../js/jquery-3.4.1.min.js"></script>
<!-- 弹窗等-->
<script src="../js/popper.min.js"></script>
<!-- bootstrap-->
<script src="../js/bootstrap.js"></script>
</body>
</html>
三、容器
- Container容器是窗口布局的最基本元素，Bootstrap推荐所有样式都定义在 .container 或 .container-fluid 容器中
- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/bootstrap.css">
<title>Title</title>
<!-- 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。-->
<style>
/*超小屏幕*/
@media (max-width: 575px) {
.container-self{
background-color: green;
width: 100%;
}
}
/*小屏幕*/
@media (min-width: 576px) and (max-width: 767px) {
.container-self{
background-color: black;
width: 540px;
}
}
/* 中等屏幕*/
@media (min-width: 768px) and (max-width: 991px) {
.container-self{
background-color: red;
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;
}
}
</style>
</head>
<body>
<!--参考:http://code.z01.com/v4/layout/overview.html Container容器-->
<!--居中流式容器,也就是百分比,会做一些响应式的布局,适配不同的断的 max-width 尺寸-->
<!--container响应式布局按照5种大小区分-->
<div class="container" style="background-color: red;height: 100px">流式容器</div>
<!--全屏，适配屏幕的 width: 100% 尺寸。-->
<div class="container-fluid" style="background-color:green;height: 100px;margin-top: 100px;margin-bottom: 100px">固定宽度的容器</div>
<!--自定义container的流式布局-->
<div class="container-self" style="height: 100px;margin: 0 auto;">自定义容器</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>
四、栅格系统(在容器 container 中处理 行 与 列 的关系)
- 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-*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../css/bootstrap.css">
<title>栅格布局</title>
<style>
.container>.row{
height: 200px;
background-color: pink;
}
.container>div>div:nth-child(1){
background-color: red;
}
.container>div>div:nth-child(2){
background-color: green;
}
.container>div>div:nth-child(3){
background-color: blue;
}
.container>div>div:nth-child(4){
background-color: purple;
}
</style>
</head>
<body>
<!--页面最外面是 container ,里面是 行 ,行 里面是列;
一行最多12列,如果超出就会自动换行.-->
<!-- col等价于col-4,因为最大为12列,他会自动除以3. -->
<!-- 另外只要设置了特小的栅格等级 .col 其余的中等\大\超大等都会以此为标准,除非单独修改-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col">第一部分</div>-->
<!-- <div class="col">第二部分</div>-->
<!-- <div class="col">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--当标准设置为col-sm(小屏幕时),超小屏幕就会变成100%,其余大\超大屏幕等还是以小屏幕为标准-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-sm">第一部分</div>-->
<!-- <div class="col-sm">第二部分</div>-->
<!-- <div class="col-sm">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--设置了2中标准,当中屏幕时是3\6\3,当大屏幕时是5\5\2-->
<!-- <div class="container">-->
<!-- <div class="row">-->
<!-- <div class="col-md-3 col-lg-5">第一部分</div>-->
<!-- <div class="col-md-6 col-lg-5">第二部分</div>-->
<!-- <div class="col-md-3 col-lg-2">第三部分</div>-->
<!-- </div>-->
<!-- </div>-->
<!--水平对齐方式 align-items-center(全局居中,end底部.start顶部);align-items-md-center(中屏幕时居中)-->
<div class="container">
<div class="row align-items-center">
<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>
<br>
<br>
<br>
<!--垂直对齐方式 justify-content-center(全局居中,end底部,between两边,around间距)-->
<!--no-gutters去除间隙沟槽-->
<div class="container">
<div class="row align-items-center justify-content-around no-gutters">
<div class="col-md-3">第一部分</div>
<div class="col-md-3">第二部分</div>
</div>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>