什么是bootstrap
基于HTML,CSS,JavaScript的前端框架
前端工具包(web快速开发)
响应式布局
移动设备优先
学习Bootstrap
- bootstrap 全局样式用法
- viewport意义
- 栅格化布局用法
- 字体,图标
- 组件
实现响应式布局的开发
实现:
工具:任意前端均可(专用Jerstrap )
1.Bootstrap中的js插件依赖于JQuery,因此JQuery要在Bootstrap之前引用
2.使用HBuilder时导入Bootstrap
一、全局样式
基本的html元素均可通过class设置增强效果
排版 表格 表单 图片 (调用定义好的类名)
标题:
- 标题(h1, h2, h3, h4, h5, h6) class 名为h1-h6
36, 30, 24, 18, 14, 12 -----px
- 副标题(small)
文本:
- 段落:p标签 (默认:14px,行高:20px, 底部外边距:10px)
- 对齐方式 ①.text-left
(class名)②.text-center
③.text-right
- 大小写 ①.text-lowercase 变小写
②.text-uppercase 变大写
③.text-capitalize 首字母大写
- 文本标记 <mark></mark> 标记
<del></del> 文字上加删除线
<ins></ins>(<u></u>) 插入文本 (下划线)
<small></small> 变小
<strong></strong> 着重加粗
表格:
- 带边框表格 .table-bordered
条纹状表格 .table-striped
悬停变色 .table-hover
紧凑风格 .table-condensed
表单
- form-control ---- 表单元素(input,select,textarea...))表单元素变漂亮(圆角,鼠标点击闪光)
- form-group ---- (div)组件的概念(一个整体)
has-error,has-warning,has-success 设置组建颜色(依次为红,黄,绿)
- form-inline ---- (form) 所有表单元素水平布局
- control-label ---- (label)
按钮
- btn 使按钮变漂亮(圆角,柔和)
- active
disabled="disabled" 禁用(无法点击按钮)
- btn-block 全屏显示按钮(适用于手机等客户端)
- btn-link 链接
- 可以设置a标签的按钮效果
图片(形状)
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
辅助类
(文本颜色 背景颜色 状态设置 三角符号)
二、响应式布局
viewport
meta 标签中的viewport(写手机端会用,调节视窗)
- 初始宽度高度 width,height
- 是否允许用户放大缩小 user-scalable,initial-scale
- 放大缩小多少倍 maximum-scale,minimun-scale
手机与pc 端基本一致
一个像素里有多个像素点
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
响应式网页
视野开阔,信息丰富。排版随意新颖。适用于pc端和手机端。
根据屏幕大小显示排版不同
栅格
******为什么col-lg-*,con-md-*,con-sm-*,con-xs-*都不起作用???
单位
px:相对于屏幕分辨率的单位,无法跟随屏幕放大缩小(所有浏览器均支持)
em:会继承
父元素字体大小。手机端开发
1em=16px(大概)
rem:会继承
根元素字体大小。比rem稳定,几乎所有浏览器支持
html{font-size:62.5%} ∴1rem=10px(大概)