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>
610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
