Bootstrap
去字符串两边空格
思路：写两个函数，一个函数去除左边的空格，一个函数去除右边的空格。判断第一个字符或最后一个字符是否是空格，如果是就把这个空格之外的字符截取出来。
<script type=”text/javascript”>
var str=’ a b ‘;
//去左边的空格
function ltrim(str){
while(true){
if(str[0]==’ ‘) //如果第0个字符是空格，就从1个开始截取到最后，
str=str.substr(1); //将第0个字符去除
else
break;
}
return str;
}
//去右边的空格
function rtrim(str){
while(true){
var n=str.length; //字符串长度
if(str[n-1]==’ ‘)
str=str.substr(0,n-1); //去除最后一个字符
else
break;
}
return str;
}
//调用
str=rtrim(ltrim(str));
alert(‘|’+str+’|’);
</script>
bootstrap 介绍
什么是bootstrap
Bootstrap是Twitter的设计师Mark Otto和Jacob Thornton合作开发的基于html、css、js，用于前端开发的开源工具包，主要用于移动端。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
为什么使用bootstrap
它简洁灵活，使得Web开发更加快捷。
bootstrap框架的作用
bootstrap内部定义了很多的样式，直接调用即可。
bootstrap中文的帮助：http://v3.bootcss.com/
下载Bootstrap
登录bootstrap的官方网站，点击“起步”
下载后的压缩包
解压
注意：我们使用的框架文件都选择带有”min”的文件，此文件是压缩过的文件。
搭建bootstrap开发环境
Bootstrap开发环境的注意：
- bootstrap框架必须基于HTML5文件
- bootstrap.min.js文件必须基于jQuery框架
引入文件搭建框架
<!–引入css文件–>
<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap.min.css”>
<!–主题文件（可以不用引入）–>
<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap-theme.min.css”>
<!–由于bootstrap基于JQuery文件，必须先引入jquery–>
<script src=”bootstrap/js/jquery-1.11.3.min.js”></script>
<!–引入bootstrap的js文件–>
<script src=”bootstrap/js/bootstrap.min.js”></script>
总结：搭建bootstrap框架至少需要3个文件，css，jQuery，js各一个
移动设备优先
布局容器
.
fluid：流
栅格化（栅格系统）
- bootstrap提供了响应式的，移动设备优先的流式的栅格化系统，随着viewport(视口的变化)系统会自动的响应
- 栅格化系统由行（.row）和列（.col-xs/sm/md/lg-n）组合的页面布局
- 栅格化系统必须在容器中
说出如下样式的意义：
.col-md-2：在中等屏幕下，有两个格组成的列
.col-lg-3:在大屏幕下，有3个格组成的列
.col-xs-5：在超小屏幕下，由5个格组成的列
列偏移
列偏移只能往右偏移
语法：col-xs/sm/md/lg-offset-n
列排序
.col-xs/sm/md/lg-pull-n： pull（拉） 往左偏移
.col-xs/sm/md/lg-push-n： push（推） 往右偏移
响应式
图片的响应式
. img-responsive 图片的响应式 responsive 响应
. img-thumbnail 给图片添加圆角边框
. img-rounded：图片圆角显示
. img-circle：图片椭圆显示
例题（栅格化+响应式）
<div class=”container-fluid”>
<div class=”row”>
<!—第一部分–>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<img src=”images/1.jpg” class=”img-responsive img-thumbnail”>
<h3>bootstrap的栅格化</h3>
<p>…</p>
</div>
<!—第二部分–>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<img src=”images/2.jpg” class=”img-responsive img-thumbnail”>
<h3>bootstrap的栅格化</h3>
<p>…</p>
</div>
<!—第三部分–>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<img src=”images/3.jpg” class=”img-responsive img-thumbnail”>
<h3>bootstrap的栅格化</h3>
<p>…</p>
</div>
</div>
</div>
中等显示器一行放三个格 小显示器一行放两个格 超小显示器一行放一个个
运行结果
排版
标题
h1~h6
例题
页面主体
1、<body>
2、<p>
文本标签
1、<del>
3、<s>
4、<ins>
5、<strong>
6、<u>
7、<em>
8、<small>
9、<big>
对齐
例题
改变大小写
例题
列表
1、class=’list-unstyled’： 移除了默认的列表的样式
2、class=’list-inline’：列表的项行内显示
3、class=’dl-horizontal’：自定义列表横向显示
表格
表格的样式
.table：表格的基本样式
. table-bordered：给表格添加边框
. table-striped：条纹状表格
. table-hover：当鼠标移到行上背景色变化
. table-condensed：表格变得更加紧凑
状态类
| .active | 鼠标悬停在行或单元格上时所设置的颜色 |
| .success | 标识成功或积极的动作 |
| .info | 标识普通的提示信息或动作 |
| .warning | 标识警告或需要用户注意 |
| .danger | 标识危险或潜在的带来负面影响的动作 |
例题：
表单
1、. form-control：表单控件的样式
2、. form-group：表单组
3、. form-inline：表单元素行内显示
4、. checkbox-inline：复选框排列在一行
5、.radio-inline：单选按钮排列在一行
6、. disabled：显示禁止使用的样式
7、. input-group：将多个标签作为输入的一个整体
8、.input-group-addon：输入整体的一个插件
9、插入组件
组件位置
例题
<div class=”container”>
<form>
<!–用户名–>
<div class=”form-group”>
用户名:<input type=”text” name=”username” class=”form-control”>
</div>
<!–密码–>
<div class=”form-group”>
密码：<input type=”password” class=”form-control”>
</div>
<!–复选框–>
<div class=”form-group”>
爱好：
<label class=”checkbox-inline disabled”><input type=”checkbox” value=”读书” name=’hobby’ disabled>读书</label>
<label class=”checkbox-inline”><input type=”checkbox” value=”游泳” name=’hobby’>游泳</label>
</div>
<!–单选按钮–>
<div class=”form-group”>
性别：
<label class=”radio-inline”><input type=”radio” name=”sex” value=””>男</label>
<label class=”radio-inline”><input type=”radio” name=”sex” value=””>女</label>
</div>
<!–在文本框前面加样式–>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>用户名：</span>
<input type=”text” name=”user” class=”form-control”>
</div>
</div>
<!–在文本框后面添加样式–>
<div class=”form-group”>
<div class=”input-group”>
<input type=”text” name=”search” class=”form-control”>
<span class=”input-group-addon”>百度一下</span>
</div>
</div>
<!–添加组件–>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>
<span class=”glyphicon glyphicon-user”></span>
</span>
<input type=”text” name=”u” class=”form-control”>
</div>
</div>
</form>
</div>
响应式表单
表单的响应式必须结合栅格化
按钮
为 <a>、<button> 或 <input> 元素添加按钮类，建议使用<button>
.btn是按钮类的基类
辅助类
文本颜色和背景色
text-**：文本颜色
bg-**：背景色
三角符号
快速浮动
. pull-left：左浮动
.pull-right：右浮动
. clearfix：清除浮动，这个和我们写的clear:both还不一样，这个作用就是清除子盒子浮动对父盒子的影响。（overflow:hidden）
下拉菜单
分页
标签页（也叫选项卡）
- 导航要使用<nav>标签
- .nav是导航的基础类
导航条
navbar：导航条的基础类
navbar-default：导航的默认样式
navbar-fixed-top：导航固定在页面的顶部
navbar-fixed-bottom：导航固定在页面底部
navbar-inverse：样式翻转
navbar-right：导航菜单右对齐
弹出框效果
拷贝对应的代码即可
完整代码
<script type=”text/javascript”>
$(function () {
$(‘[data-toggle=”popover”]’).popover();
})
</script>
<div class=”container text-center” style=”margin:100px”>
<button type=”button” class=”btn btn-default” data-toggle=”popover” data-placement=”right” title=”锄禾” data-content=”锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。”>左侧</button>
</div>
data-placement=”top|left|right|bottom”，用来控制弹出框弹出的方向
图片轮播效果
拷贝代码更改即可
图片展示的页面效果
