前言
新项目改框架,前台要用BootStrap响应式布局,如此一来,又把BootStrap学习了一遍。BootStrap响应式布局做的不错,组件的使用也是跟以前有了很大的不同,下面就简单介绍一下BootStrap简单组件的使用。
使用BootStrap
使用BootStrap前,需要先引入BootStrap的css、js和Jquery。
面板
通常做系统时,我们经常会把页面分为几部分。一般情况下我们会将页面分为几个div,然后设置div的样式,有了BootStrap,就可以直接用面板来控制,而且它还可以根据浏览器窗口的大小来自适应自己的大小,这也是响应式布局的一个特点。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 带表格的面板</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
</div>
</body>
</html>
现在公司做的项目,基本上都是左侧展示功能列表,右侧展示详细的页面内容。自动的将页面分为左右两部分,就是用BootStrap的栅格布局来做的,其实也不止是两部分,多个栅格也是可以的。BootStrap栅格布局会自动把页面分为12列,只要分别设置左右的列数就可以控制左右两边的宽度。栅格布局是没有高度的,它会根据里面放置内容的高度来自适应,不过也可以重写BootStrap的css,使得栅格在一加载的时候就有自己的高度。
<div class="container">
<div class="row clearfix">
<div class="col-md-6 column">
</div>
<div class="col-md-6 column">
</div>
</div>
</div>
表格应该算是很常用的了,BootStrap的表格元素没有变,在页面上写一个表格,只不过要修改表格的class,这样就能添加BootStrap的样式。
表格元素:
标签 | 描述 |
<table> | 为表格添加基础样式。 |
<thead> | 表格标题行的容器元素(<tr>),用来标识表格列。 |
<tbody> | 表格主体中的表格行的容器元素(<tr>)。 |
<tr> | 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。 |
<td> | 默认的表格单元格。 |
<th> | 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。 |
<caption> | 关于表格存储内容的描述或总结。 |
类 | 描述 |
.table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
.table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
.table-bordered | 为所有表格的单元格添加边框 |
.table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
.table-condensed | 让表格更加紧凑 |
类 | 描述 |
.active | 将悬停的颜色应用在行或者单元格上 |
.success | 表示成功的操作 |
.info | 表示信息变化的操作 |
.warning | 表示一个警告的操作 |
.danger | 表示一个危险的操作 |
类 | 描述 |
.active | 对某一特定的行或单元格应用悬停颜色 |
.success | 表示一个成功的或积极的动作 |
.warning | 表示一个需要注意的警告 |
.danger | 表示一个危险的或潜在的负面动作 |
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
选项 2 - 选择它将会取消选择选项 1
</label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3"
value="option1" checked> 选项 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4"
value="option2"> 选项 2
</label>
</div>
<form role="form">
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
form表单在系统中可以离不开的,form表单在BootStrap中,和普通的Form表单没什么大的区别,同样也是通过控制class的值,来改变form表单的样式。form表单分为三种类型,垂直表单、内联表单和水平表单。垂直表单是BootStrap自带的,也就是普通的表单。内联表单中表单的元素都是水平向左对齐的,是通过class属性.form-inline来控制的。水平表单和其他两种表单呈现样式不同,简单来说它是已经设置好样式的表单,对表单内容元素也需要设置class的属性。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 基本表单</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 内联表单</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 水平表单</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</body>
</html>
按钮也是最不可或缺的一个页面元素,BootStrap的按钮可以根据不同需求,设置不同的class属性,来显示不同样式。同样,按钮也可以实现单选框和多选框的功能。
按钮的类:
类 | 描述 |
.btn | 为按钮添加基本样式 |
.btn-default | 默认/标准按钮 |
.btn-primary | 原始按钮样式(未被操作) |
.btn-success | 表示成功的动作 |
.btn-info | 该样式可用于要弹出信息的按钮 |
.btn-warning | 表示需要谨慎操作的按钮 |
.btn-danger | 表示一个危险动作的按钮操作 |
.btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
.btn-lg | 制作一个大按钮 |
.btn-sm | 制作一个小按钮 |
.btn-xs | 制作一个超小按钮 |
.btn-block | 块级按钮(拉伸至父元素100%的宽度) |
.active | 按钮被点击 |
.disabled | 禁用按钮 |
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 选项 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 3
</label>
</div>
<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
<button type="button" class="btn btn-primary">原始</button>
</div>
<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始
</button>
</div>
<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始
</button>
</div>
<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Loading finished">请点击我
</button>
<script type="text/javascript">
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
总结
BootStrap默认的色调基本是灰白黑的,不过也可以设置它的class来改变元素的样式,或者通过重写它的css来设置也可以实现一样的效果。BootStrap在设置页面元素的高度时,如果用了栅格或者panel,要先设置栅格和panel的高度。其次里面的元素最好设置成百分比的高度,但是如果里面的元素用的是BootStrap的class控制的元素,那么就可以不用设置,因为它可以自己适应。