1:介绍
-
ootstrap是一个基于HTML、CSS和JavaScript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件。
-
Bootstrap常用来开发响应式布局和移动设备优先的Web项目,能够帮助开发者快速搭建前端页面。
2:优点
-
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
-
浏览器支持:所有的主流浏览器都支持 Bootstrap。
-
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
-
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
-
它为开发人员创建接口提供了一个简洁统一的解决方案。
-
它包含了功能强大的内置组件,易于定制。
-
它还提供了基于 Web 的定制。
-
它是开源的:Bootstrap 是完全开源的。代码的托管、开发和维护都在 GitHub 平台上完成。
3:引入:
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引入Bootstrap 4核心CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery文件,务必在bootstrap.min.js之前引入 -->
<script src="js/jquery.min.js" ></script>
<!-- 引入Bootstrap 4核心JavaScript 文件 -->
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
4:栅格系统
介绍:栅格系统(Grid Systems),即网格系统,它是一种清晰、工整的设计风格,用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上,一个印刷版面上划分了若干个格子,非常方便排版。
后来,栅格系统被应用于网页布局中,使用响应式栅格系统进行页面布局时,可以让一个网页在不同大小的屏幕上,呈现出不同的结构。 例如,在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。
实现简单版栅格系统:
css样式:
<style>
.row { width: 100%; }
.row :after { /* 通过伪元素:after清除浮动 */
clear: left; /* 清除左浮动 */
content: '';
display: table; /* 该元素会作为块级表格来显示(类似 <table>) */
}
[class^="col"] { float: left; background-color: #e0e0e0; }
.col1 { width: 25%; }
.col2 { width: 50%; }
</style>
HTML:结构
<body>
<div class="row"><header>页头</header></div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col1">侧边栏</aside>
</div>
<div class="row"><footer>页尾</footer></div>
</body>
效果图:
5:布局容器
介绍:
容器是Bootstrap中最基本的布局元素,容器用于在其中容纳、填充一些内容,以及有时需要使内容居中。
在实现Bootstrap页面布局容器之前,需要了解设备屏幕的尺寸。
Bootstrap带有3个不同的容器,具体如下:
.container容器
它在每个响应断点处设置了一个max-width最大宽度
.container-fluid容器
它在每个响应断点处设置布局容器的宽度为100%
.container-{breakpoint}容器
它在每个响应断点处设置布局容器的宽度为100%,直到达到指定的断点为止。
每个容器中的.container-fluid和.container等类,以及每个断点之间的比较:
.container-fluid类
Bootstrap 4中的.container-fluid类是一种占据全部视口的容器。
编写HTML结构和css样式
<body>
<div class="container-fluid">.container-fluid设置布局容器</div>
</body>
<style>
div{
background-color: #eee;
font-size: 30px;
}
</style>
.container类
Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。
.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。
编写HTML结构
<body>
<div class="container">.container类的使用</div>
</body>
编写css样式
<style>
div{
background-color: #eee;
font-size: 30px;
}
</style>