bootstrap操作
主要内容
- bootstrap简介
前端框架：将网页中常见的组件、特效，直接开发好封装起来，在使用这些组件的地方，直接引入操作、修改使用即可。可以很大程度的提高开发效率。
- 基础框架：封装了HTML/CSS/JS/JQ,形成的可以用于快速开发网页布局的框架
如bootstrap
- 高级框架：封装了HTML/CSS/JS/JQ/..，同时还对网页中的数据进行定向的流程处理，对于网页展示在不同的终端[PC、移动]不同的尺寸进行了兼容处理，形成了完成的前端开发流程，如：VUE+vue相关前端组件、AngularJS+ionic
- bootstrap入门
快速，高效开发移动端应用为主的JS框架
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
BS-下载-JS框架-js文件|css文件|操作案例
css文件：包含已经封装好的样式：引入css文件即可使用bs的样式库[大量已经实现的样式，可以直接通过提供的名称使用]
js文件：包含已经封装好的特效：需要引入jquery.js文件之后，引入bootstrap.js文件，因为bootstrap的网页特效，是以jquery为基础的。
下载：https://v3.bootcss.com/getting-started/#download
下载的文件是一个压缩包
版本：Bootstrap 2.x – 3.x – 4.x
bootstrap3.3.7/ bootstrap主文件夹
js/ 包含bootstrap主要特效代码的js文件的文件夹[bootstrap.js]
css/ 包含bootstrap主要样式的文件夹，核心文件[bootstrap.css]
fonts/ 包含bootstrap中使用的默认字体文件、字体图标 文件等等
项目开发使用时，如果要求项目有良好的bootstrap支持，主要引入如下三个文件
- bootstrap.min.css
- jquery.min.js
- bootstrap.min.js
bs是基于网格布局的一个设计开发框架。
网格布局-> 类似于表格-> 不是表格
bs中的网格布局：栅格系统
将网页按照行列的方式进行网格拆分
每一行可以包含12列；如果一行中超过了12列~超出部分自动换行显示[并不是新的一行]
bs中为了方便开发人员的操作，将常规的样式，全部封装好之后，提供了样式名称。
可以直接通过样式名称进行样式的处理[bs中~并不是学习新样式、新技术、新布局：bs中我们要做的，就是记住它的样式(学会使用它的文档)]
容器样式：网页中的内容，必须包含在一个指定的容器中，方便操作和统一管理。
.container：响应式， 指定宽度的容器，随着浏览器的尺寸变化自动变化宽度
.container-fluid: 铺满浏览器窗口的流式容器，浏览器有多宽，这个样式就有多宽
这两个不能嵌套使用
首先出现容器样式，然后在容器样式中，就可以定义行样式和列样式了
行样式：.row表示声明一行
列样式：.col-md-n表示声明一列，占用n个标准列的位置
列偏移：.col-md-offset-n：从左往右偏移的列数
样式定义规定：先有容器》再有行》再有列
网页尺寸定义：lg-md-sm-xs四中尺寸样式，分别适用于不同尺寸的屏幕
lg:屏幕尺寸大于1170px情况下使用
md:屏幕尺寸大于970px情况下使用
sm:屏幕尺寸大于768px情况下使用
xs:屏幕尺寸小于768px情况下使用
hidden-md:表示让修饰的元素标签再md尺寸下隐藏，其他三种尺寸小显示响应式
visible-md:表示让修饰的元素标签再md尺寸下显示，其他三种尺寸下隐藏响应式
Bootstrap全局样式：封装了单个元素标签的特定样式
根据常见的网页呈现数据的规则，定义了字体、颜色、背景等样式的修饰
提供样式名称，给开发人员直接使用
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
- 排版样式
- <p class="h1">标题样式，展示标题的格式样式</p>
- <mark>增加背景色</mark>
- 段落样式
- text-left左对齐
- text-right右对齐
- text-center居中对齐
- lend 突出显示
- 代码样式
- 代码样式就是让代码部分在普通文本中，有一个高亮显示
- kbd反色显示：背景色和字体颜色互换
- pre: 突出显示代码段
- 表格样式
- table: 声明使用内置样式修饰一个普通表格
- .table-striped: 声明一个隔行变色的表格
- table-borderd: 声明一个带有边框的表格
- table-hover: 声明一个带有鼠标滑过效果的表格
- 表单样式[*]
- 按钮样式[*]
这些颜色在传输过程中基本不会引起颜色数据丢失
- <button class="btn btn-default">默认按钮</button>
- btn-primary主要按钮
- btn-success绿色
- btn-info 淡蓝色
- btn-warning 黄色
- btn-danger 红色
- btn-primary 蓝色
文本颜色
- <p class="text-muted">文本颜色同样根据bs中提供的主要色调进行确定</p>
文本背景色
- <p class="bg-primary">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
- 图片样式
- 辅助类样式[*]
- 响应式样式[*]
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
