【前端】Bootstrap

网友投稿 720 2022-11-24

【前端】Bootstrap

概念

1. 概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。2. 快速入门 1. -Bootstrap 2. 在项目中将这三个文件夹复制 3. 创建html页面，引入必要的资源文件

Bootstrap HelloWorld

你好，世界！

响应式布局

* 同一套页面可以兼容不同分辨率的设备。* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子* 步骤： 1. 定义容器。相当于之前的table、 * 容器分类： 1. container：两边留白 2. container-fluid：每一种设备都是100%宽度 2. 定义行。相当于之前的tr 样式：row 3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目 * 设备代号： 1. xs：超小屏幕手机 (<768px)：col-xs-12 2. sm：小屏幕平板 (≥768px) 3. md：中等屏幕桌面显示器 (≥992px) 4. lg：大屏幕大桌面显示器 (≥1200px) * 注意： 1. 一行中如果格子数目超过12，则超出部分自动换行。 2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。 3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

Bootstrap HelloWorld

栅格

CSS样式和JS插件

1. 全局CSS样式： * 按钮：class="btn btn-default" * 图片： * class="img-responsive"：图片在任意尺寸都占100% * 图片形状 * ：方形 * ：圆形 * ：相框 * 表格 * table * table-bordered * table-hover * 表单 * 给表单项添加：class="form-control" 2. 组件： * 导航条 * 分页条3. 插件： * 轮播图

CSS全局样式1

Bootstrap HelloWorld Link

CSS全局样式2

Bootstrap HelloWorld

编号	姓名	年龄
001	张三	23
002	张三	23
003	张三	23

Bootstrap组件之导航条

Bootstrap HelloWorld

Bootstrap组件之分页条

Bootstrap HelloWorld

Bootstrap组件之轮播图

Bootstrap HelloWorld

案例：黑马旅游网

Bootstrap HelloWorld

搜索