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”,用来控制弹出框弹出的方向
图片轮播效果
拷贝代码更改即可
图片展示的页面效果