去字符串两边空格

思路：写两个函数，一个函数去除左边的空格，一个函数去除右边的空格。判断第一个字符或最后一个字符是否是空格，如果是就把这个空格之外的字符截取出来。

<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开发环境的注意：

1. bootstrap框架必须基于HTML5文件
2. 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：流

栅格化（栅格系统）

1. bootstrap提供了响应式的，移动设备优先的流式的栅格化系统，随着viewport(视口的变化)系统会自动的响应
2. 栅格化系统由行（.row）和列（.col-xs/sm/md/lg-n）组合的页面布局
3. 栅格化系统必须在容器中

说出如下样式的意义：

.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：表格变得更加紧凑

状态类

例题：

表单

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）

下拉菜单

分页

标签页（也叫选项卡）

1. 导航要使用<nav>标签
2. .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”，用来控制弹出框弹出的方向

图片轮播效果

拷贝代码更改即可

图片展示的页面效果