bootstrap简单知识
1. 开发工具
开发工具 : sublime \ vs code
专门针对bootstrap的开发工具 : jetstrap
2. bootstrap的环境搭建
去官网下载 ---- 下载用于生产环的bootstrap
需要引入bootstrap文件-----包括css文件和js文件
使用bootstrap时如果要使用jquery , 则需要引入1.9.1以上的版本
3. bootstrap的全局样式
特点: 代码整洁 风格统一 美观易用
bootstrap对默认的排版样式进行了css样式定义,使得各种基本结构套用出来的html页面更加美观
标题: (h1~h6/.h1~.h6) 在内联样式,如span标签中可以使用标题类
h1:36px h2:30px h3:24px h4:18px h5:14px h6:12px
副标题: (small) 用small标签包括内容,将以小标题的形式在页面中显示
文本: p标签默认14px 、行高20px、底部外边距10px（普通网页中字体大小是16px）
文本对齐方式：
.text-left 左对齐
.text-center 居中
.text-right 右对齐
大小写:
.text-lowercase 小写
.text-uppercase 大写
.text-capitalize 首字母大写
表格 给表格添加一个类 table,表格会好看一些
.table-striped 给表格添加隔行换色
.table-border 给表格添加边框
.table-hover 当鼠标悬浮时,有变色的效果
给表格的某一行添加颜色
表单
给form添加一个.form-inline的类,则form里的所有内容会横向排列
.form-control 给input框添加bootstrap的样式,使它布满整个屏幕
input框 大小的改变 .input-lg(更大)/input-sm(更小)
label 添加sr-only类 使提示文字消失不见
button 添加类btn 变成圆角的button .btn-success/.btn-primary/.btn-info...改变按钮的颜色 .active 设置按下的效果 .btn-lg/.btn-sm 改变按钮的大小 .btn-block使按钮全屏
a 标签设置 .btn 也可变成按钮的样式
图片: .img-rounded图片圆角 .img-circle圆形 .img-thumbnail 代边框的圆角图形
4. bootstrap渐进
(1) meta 标签中的 viewport
为了更好的适应手机端的屏幕大小
-
width height 设置宽度和高度
-
user-scalable 设置是否允许用户去放大或者缩小网页
-
initial-scale 设置网页初始化的大小
-
maximum-scale 允许用户放大多少倍
-
minimun-scale 允许用户缩小多少倍
(2) 响应式---栅格布局
栅格参数
| 超小屏幕(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面显示器(>=992) | 大屏幕 大桌面显示器(>=1200px) | |
|---|---|---|---|---|
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)数 : 12
(3) 单位
网页开发中的单位px
-
px 是相对于屏幕分辨率的单位
-
px的大小无法跟随屏幕放大缩小
-
所有浏览器都支持px单位
网页开发中的单位em
-
1em = 16px (但不完全是)
-
em会继承父级元素的字体大小
-
IE的部分浏览器并不支持em
网页开发中的单位rem
-
rem 与 em 相似
-
rem会继承根元素的字体大小
-
html { font-size:10px }
(4) 字体图标
特点: 体积小便于加载 无需重复设计 方便引用
使用glyphicon字体图标库
5. 组件
(1) 怪异的属性 :
-
role 给盲文浏览器进行识别的
-
aria-label 当焦点落在输入框时, 读屏软件会将输入框中的内容读取出来
-
tablndex 可以设置tab键在控件中移动 , 也就是焦点的移动顺序
-
data- html5规范中新增的属性 , 可以自定义的属性 在页面中不显示,可以用来实现数据交互
(2) 下拉菜单
-
.dropdown 控制组件为下拉
-
.dropdown-menu-right 代替.pull-right 右对齐
-
.divider 分割线
Document
(3) 控件组
.input-group 表示控件组
.input-group-addon可放置额外内容及图标
$
(4) 导航
-
以一个带有class .nav的无需列表开始
-
.nav-tabs代表可切换的导航
-
.nav-pills代表胶囊导航
-
.nav-justified 使导航垂直
(5) 分页
-
.pagination 在父元素中添加表示分页
-
.pager放置在分页区域
-
.previous 把链接向左对齐 .next把链接向右对齐
(6) 进度条
-
.progress 表示进度条
-
通过状态类改变进度条的颜色
-
.progress-bar-striped 使得进度条颜色渐变
(7) 列表
-
.list-group代表列表
-
.badge 代表状态数
-
.active 代表选中状态
-
这是一个列表
14
-
这是一个列表
14
-
这是一个列表
14
(8) 面板
-
.panel 代表面板
-
.panel-body 代表面板内容
-
.panel-footer代表面板的注脚
弹出层
这是面板的具体内容
6. bootstrap的插件
-
bootstrap插件依赖bootstrap.js
-
bootstrap.js 基于jQuery
bootstrap中的插件 --- data属性
-
通过data属性控制页面交互
-
$(document).off('.data-api') 解除属性绑定
这是一个内容