01 Bootstrap简介
简介:Bootstrap 是基于 HTML、CSS、JavaScript 的前端框架( CSS/HTML 框架)。其外,Bootstrap 还提供了优雅的 HTML 和 CSS 规范
特点:移动设备优先(框架包含了贯穿于整个库的移动设备优先的样式);响应式设计(响应式 CSS 能够自适应于台式机、平板电脑和手机);为开发创建接口提供了一个简洁统一的解决方案;包含功能强大的内置组件,易于定制
技术选型:搜索量(例如:百度指数)>社区活跃度(github star>1w&issues)>开源与否
02 Bootstrap安装
注意:Bootstrap 4不支持IE 8版本
文件/目录结构:
示例:Bootstrap官网地址
03 Bootstrap网格布局
简介:Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列
网格:在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法
前端思想:渐进增强(向上兼容),即先保证所有浏览器字能显示再渲染特效;优雅降级(向下兼容),即先满足最新最强浏览器的效果
布局发展:表格(table)布局(问题:必须表格里内容加载完才会显示)>div+css布局(特点:代码从上往下执行,问题:操作比较复杂)
网格系统规则:行放置在 .container class内,列放置在 .row class内。一般.row放置在.container内
网格选项:
- 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
- 各设备对应Class 前缀:手机(微型) > .col-xs-;平板电脑(小型) > .col-sm-;台式电脑(中型) > .col-md-;台式电脑(大型) > .col-lg-
示例展示:
04 Bootstrap媒体查询
简介:媒体查询能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果(CSS 3新特性)
媒体类型:媒体类型在 CSS2 中是一个常见属性,可以通过媒体类型对不同设备指定不同样式,其中Screen(电脑显示器)、All(所有设备)、Print(打印用纸或打印预览视图)为最常见的三种媒体类型
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.my_div {
border: 1px solid red;
}
@media screen and (max-width: 480px){
.my_div {
border: 1px solid dodgerblue;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6" style="border: 1px solid orange;">手机设备启用sm</div>
<div class="col-md-6 col-sm-6" style="border: 1px solid orange;">电脑设备齐总md</div>
</div>
</div>
<div class="my_div">
展示 媒体查询 功能
</div>
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-3.3.1.min.js"/>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"/>
</body>
</html>
05 Bootstrap字体图标
字体:矢量(无论屏幕大小,都不会失真)
图标:FontAwesome、LineAwesome、SocialIcons、阿里巴巴矢量图标库