BootStrap
概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。
框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。
好处：
① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② 响应式布局：同一套页面可以兼容不同分辨率的设备。
快速入门
下载Bootstrap
下载后有三个文件夹，将这三个文件夹复制到项目中
<!-- Bootstrap -->
<!--引入的资源文件是bootstrap-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
响应式布局
同一套页面可以兼容不同分辨率的设备，按照我的想法是随着页面的缩小而调整页面布局，随着页面的增大也调整布局使之适应页面的内容。
实现：依赖于栅格系统
栅格系统：将一行平均分为12个格子，可以指定元素占几个格子
步骤：
定义容器：相当于之前的table
容器的分类：
container：两边有空白，除了最小的屏幕
container-fluid：每一种设备都是100%宽度
定义行。相当于之前的tr 样式：row
定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号
xs：超小屏幕 手机 (<768px) ：col-xs-12
sm：小屏幕 平板 (≥768px)
md：中等屏幕 桌面显示器 (≥992px)
lg：大屏幕 大桌面显示器 (≥1200px)
注意事项：
一行中如果格子数目超出12，那么就会自动换行
栅格类属性可以向上兼容
如果真实设备的宽度小于了设置栅格属性的设备代码的最小值，会一个元素占满一整行。
知识点预览
一、布局
1.Bootstrap介绍_栅格系统
2.禁用响应式_响应式分界点
二、内容
3.排版_代码
4.图片_图片框
5.表格
三、公共样式
6.边框_浮动
7.颜色_Display显示属性
8.文本处理_垂直对齐_规格与尺寸
9.间隔_阴影
10.position定位_visibility显示或隐藏_关闭图标
11.嵌入_图像替换_读屏器
12.flex弹性布局
四、组件
13.警告提示框(Alert)
14.徽章(Badge)_面包屑导航(Breadcrumb)
15.按钮(Button)
16.下拉菜单(Dropdowns)
17.按钮组(Btn-group)
18.Input输入框及输入框群组
19.表单(Form)
20.轮播效果(Carousel)
21.Hero广告大块屏幕(Jumbotron)_列表组(List-group)
22.媒体对象-图文混排(Media-object)
23.弹出提示框(Toast)
24.提示冒泡(Tooltip)
25.POP提示(Popover)
26.弹出模态框(Modal)
27.导航-滑动门(nav)
28.导航栏(navbar)
29.卡片(Card)
30.折叠面板(Collapse)
31.分页(Pagination)_进度条(Progress)
32.滚动监听(Scrollspy)
33.旋转特效(Spinners)
五、延伸
34.字体图标
更多请参考菜鸟教程
网友评论