web学习-bootstrap

Posted 2021-04-29 虚拟流水铺

bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自Twitter，是目前很受欢迎的前端框架之一。Bootrstrap是基于html、CSS、javascript的，让书写代码更容易。移动优先，响应式布局开发。

bootstrap中文网址：http://www.bootcss.com/

bootstrap 容器

• container-fluid 流体

• container

• 1170

• 970

• 750

• 100%

<div class="container-fluid">流体容器</div><div class="container">响应式固定容器</div>

bootstrap响应式查询区间：

1、大于等于768
2、大于等于992
3、大于等于1200

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行

<style type="text/css"> div[class*='col-']{
 background-color:cyan; border:1px solid #ddd; height:50px; }</style>
......
<div class="container"> <div class="row"> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-3">col-lg-3</div> <div class="col-lg-5">col-lg-5</div> <div class="col-lg-1">col-lg-1</div> </div> <br> <br> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> <div class="col-md-3">col-md-3</div> </div> <br> <br> <div class="row"> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> <div class="col-sm-3">col-sm-3</div> </div> <br> <br> <div class="row"> <div class="col-xs-3">col-xs-3</div> <div class="col-xs-3">col-xs-3</div> <div class="col-xs-3">col-xs-3</div> <div class="col-xs-3">col-xs-3</div> </div></div>

列偏移

1、col-lg-offset-
2、col-md-offset-
3、col-sm-offset-
4、col-xs-offset-

bootstrap 按钮

1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组

<!-- 一般按钮组 --><div class="btn-group"> <input type="button" name="" value="按钮一" class="btn btn-primary"> <input type="button" name="" value="按钮二" class="btn btn-warning"> <input type="button" name="" value="按钮三" class="btn btn-danger"></div>
<!-- 通栏按钮组  如果用input标签做按钮，需要将它用 btn-group的容器包起来--><div class="btn-group btn-group-justified"> <div class="btn-group"> <input type="button" name="" value="按钮一" class="btn btn-primary"> </div> <div class="btn-group"> <input type="button" name="" value="按钮二" class="btn btn-warning"> </div> <div class="btn-group"> <input type="button" name="" value="按钮三" class="btn btn-danger"> </div></div>
<!-- 通栏按钮组，如果用a标签做按钮，就不用上面的结构，直接写--><div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">按钮一</a> <a href="#" class="btn btn-default">按钮二</a> <a href="#" class="btn btn-default">按钮三</a></div>

bootstrap 表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单

<!-- 表单 --><form role="form"> <div class="form-group form-group-lg"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
<!-- 表单控件组 --><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">@</span></div>
<!-- 表单控件组 --><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span></div>

bootstrap 图片

img-responsive 声明响应式图片

bootstrap 字体图标

通过字体代替图标，font文件夹需要和css文件夹在同一目录

bootstrap 导航条

1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
15、navbar-left 菜单靠左
16、navbar-right 菜单靠右

<!-- 可伸缩菜单 data-target="#.." 需要加# --><div class="navbar navbar-inverse navbar-static-top "> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">LOGO</a> </div> <div class="collapse navbar-collapse" id="mymenu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">公司新闻</a></li> <li><a href="#">行业动态</a></li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div>  </div> </form> </div> </div></div>

路径导航

<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li></ol>

巨幕

<div class="jumbotron"> <div class="container"> ... </div></div>

bootstrap 模态框

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button>
<div class="modal fade" id="mymodal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> 大尺寸弹出框 </div> <div class="modal-body"> 模态框主体 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div>

bootstrap 下拉菜单

1、dropdown-toggle
2、dropdown-menu

<div class="row">  <div class="dropdown"> <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> </ul> </div></div>

bootstrap 隐藏类

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg

正则表达式

1、什么是正则表达式：
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符

var sTr01 = '123456asdf';var re01 = /\d+/;//匹配纯数字字符串var re02 = /^\d+$/;alert(re01.test(sTr01)); //弹出truealert(re02.test(sTr01)); //弹出false

4、量词：对左边的匹配字符定义个数
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g：global，全文搜索，默认搜索到第一个结果接停止
i：ingore case，忽略大小写，默认大小写敏感

8、常用函数
1、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

2、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符

正则默认规则
匹配成功就结束，不会继续匹配，区分大小写

var sTr01 = 'abcdefedcbaCef';var re01 = /c/;var re02 = /c/g;var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,'*');var sTr03 = sTr01.replace(re02,'*');var sTr04 = sTr01.replace(re03,'*');alert(sTr02); // 弹出 ab*defedcbaCefalert(sTr03); // 弹出 ab*defed*baCefalert(sTr04); // 弹出 ab*defed*ba*ef

常用正则规则

//用户名验证：(数字字母或下划线6到20位)var reUser = /^\w{6,20}$/;
//邮箱验证：var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：var rePhone = /^1[3458]\d{9}$/;

前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

一、代码部署：

二、编码

html：

1、使用结构清晰，简单，语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片

css：

1、精简css选择器
2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标
7、使用css sprite(雪碧图)
8、使用svg图形
9、避免使用CSS表达式

body{ background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" ); }

10、避免使用css滤镜

javascript：

1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、使用原生方法
6、用switch语句代替复杂的if else语句
7、减少语句数，比如说多个变量声明可以写成一句
8、使用字面量表达式来初始化数组或者对象
9、使用innerHTML取代复杂的元素注入
10、使用事件代理(事件委托)
11、避免多次访问dom选择集
12、高频触发事件设置使用函数节流
13、使用Web Storage缓存数据