Bootstrap简单使用
2020-07-19 04:17
597 查看
Bootstrap简单使用:
1. 概念:一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷 * 框架 :一个半成品软件,开发人员可以在框架基础上,在进行开发,简化代码 * 好处 1. 定义了很多的css样式和js插件 * 可以直接使用这些插件和样式来得到丰富的页面效果 2. 响应式布局 1. 同一套页面可以兼容不同分辨率的设备 2. 使用 1. 下载: *[Bootstrap官网链接](https://www.bootcss.com/) 1. 在官网找到中文文档,如下图
2. 找到下图中的下载
3. 选择第一个用于生产环境的bootstrap,如下图
2.引用 * 在下载目录中将三个文件夹复制到项目中
3.创建html页面,引入必要的资源文件 * 可以在官网下载下图的起步文档 * 将红框内部的路劲改为自己本地的资源路径 * 导入需要的jQuery的jar包
响应式布局
* 同一套页面可以兼容不同分辨率的设备 * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤: 1. 定义容器:相当于之前的table标签 * 容器分类: 1. container:两边留白 * 具体参数参考bootstrap官网 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. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行
CSS样式和JS插件
备注:本博客乃是笔记,用于自己复习,若有不全,请见谅
相关文章推荐
- 使用bootstrap简单制作Tab切换页
- bootstrap中modal的简单使用
- 使用Python+Flask+Bootstrap实现一个简单的用户权限管理(RBAC)(Part3)
- select2 bootstrap 简单使用
- bootstrap前端框架的简单基本使用
- Bootstrap和 Foundation这两个前端框架区别 和 简单使用。
- 基于Bootstrap使用jQuery实现简单可编辑表格
- bootstrap使用validate实现简单校验功能
- 使用Bootstrap编写一个简单的网页轮播图效果
- bootstrap4简单使用和入门02-bootstrap的js组件简单使用
- 基于Bootstrap使用jQuery实现简单可编辑表格
- Bootstrap轮播插件简单使用方法介绍
- Bootstrap table的一些简单使用总结
- Bootstrap 与 Jquery validate 结合使用——简单实现
- bootstrap前端框架的简单使用
- 五滴水:使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
- bootstrap-select简单使用
- Bootstrap简单使用
- Android使用bootstrap简单介绍
- 基于Bootstrap使用jQuery实现简单可编辑表格