bootstrap下载安装和基础学习
1.前往bootstrap官网，下载已经编译好的版本，不是source版。
2.下载后解压，然后将两个文件夹css,js或者三个文件夹css,fonts,js拷贝到工程目录里
我这里没有拷js文件
3.在HTML文件或者jsp文件中引入
<!doctype html> <html lang="en">
我这个是在jsp中使用。
4.链接
<link rel="stylesheet" href="css/bootstrap.css">
还有一些基本的使用
1.按钮样式和文本框样式
<div class="container"> <p><button class="btn btn-primary" name="insertwork" id="insertwork" value="添加岗位信息" onclick="insert();return false;">添加岗位信息</button> </p> <p><button class="btn btn-primary" name="showall" id="showall" value="查看全部岗位信息" onclick="showInfo()">查看全部岗位信息</button> </p> <p> </p> <p> <span class="input-group-addon"> <input name="workername" type="text" class="form-control" placeholder="请输入要查询的岗位名称" > </span> <button class="btn btn-info" name="queryname" id="queryname" value="按照岗位名称查询" onclick="searchInfo(form1.workername)">按照岗位名称查询</button> </p> </div>
运行后是这样
2.标题和字体样式
<div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <h1 class="text-center text-info"> 岗位信息管理系统 </h1> </div> </div> </div>
<h2 id="overview" class="page-header"><%=operation %>成功</h2>
3.表单样式
<table class="table">
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr class="active"><td>001</td><td>郭靖</td><td>25</td></tr>
<tr class="success"><td>002</td><td>黄蓉</td><td>23</td></tr>
<tr class="info"><td>003</td><td>杨过</td><td>24</td></tr>
<tr class="warning"><td>004</td><td>黄老邪</td><td>54</td></tr>
<tr class="danger"><td>005</td><td>欧阳锋</td><td>42</td></tr>
</tbody>
</table>
运行结果
4.文本域样式
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
5.文字样式
<div class="text-muted">.text-muted 效果</div> <div class="text-primary">.text-primary效果</div> <div class="text-success">.text-success效果</div> <div class="text-info">.text-info效果</div> <div class="text-warning">.text-warning效果</div> <div class="text-danger">.text-danger效果</div>
上一篇：
IDEA上Java项目控制台中文乱码