Bootstrap
Bootstrap 简介
什么是bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。 Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么使用 Bootstrap?
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持:所有的主流浏览器都支持 Bootstrap。 Internet Explorer Firefox Opera Google Chrome Safari 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。 响应式设计 它为开发人员创建接口提供了一个简洁统一的解决方案。 它包含了功能强大的内置组件,易于定制。 它还提供了基于 Web 的定制。 它是开源的。
Bootstrap使用
环境下载
下载 Bootstrap 从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
导入时用
设置界面支持html5
<!DOCTYPE html> <html> .... </html>
引入js/css文件
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
本地文件导入方式(先将bootstrap文件复制到项目中)
<script type="text/javascript" src="../js/jquery-2.2.1.min.js"> </script> <!-- 包括所有已编译的插件 --> <script type="text/javascript" src="../js/bootstrap.js"></script> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
移动端
文档位置
http://v3.bootcss.com
案例入门,展示一个内边框的div
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小,查看响应式效果!</p>
</div>
</div>
案例效果
效果一 展示一个表格效果
<table class="table table-striped">
<thead>
<tr>
<th>Student-ID</th>
<th>Last Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Reddy</td>
<td>A+</td>
</tr>
<tr>
<td>002</td>
<td>Pallod</td>
<td>A</td>
</tr>
<tr>
<td>003</td>
<td>Sen</td>
<td>A+</td>
</tr>
</tbody>
</table>
案例效果,展示按钮
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
栅格系统
<div class="container">
<div class="row">
<div class="col-xs-12 ">一共12列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
<div class="col-xs-1 ">1列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
<div class="col-xs-4 ">占4列</div>
</div>
</div>
样式
div.container div.row div {
margin: 5px 0px;
}
div.container div.row div {
background-color: lightgray;
border: 1px solid gray;
text-align: center;
}
案例效果,导航栏
案例效果,轮播图
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="../img/bb.jpg" alt="First slide">
</div>
<div class="item">
<img src="../img/aa.jpg" alt="Second slide">
</div>
<div class="item">
<img src="../img/aa.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
播动
$('.carousel').carousel();
模态框
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
SSM前后端分离项目
定义导航栏效果
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-pills">
<li class="active"><a href="#">员工管理系统</a></li>
<li><a href="#" onclick="showUsers()">员工管理</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
导航栏点击事件切换效果
$("li").click(function() {
$.each($("li"), function() {
$(this).prop("class", "");
});
$(this).prop("class", "active");
});
定义数据展示表格
<table id="tt" class="table table-striped">
</table>
数据展示
$.ajax({
type : "GET",
url : "/Day10_EasyUI/getUser.action",
dataType : "json",
success : function(data) {
var str = "<thead><tr><th>用户编号</th><th>用户名</th><th>邮箱</th><th>性别</th><th>操作</th></tr></thead>";
$.each(data,function(index) {
str = str
+ "<tbody><tr><td>"
+ index
+ "</td><td>"
+ this.username
+ "</td><td>"
+ this.email
+ "</td><td>"
+ this.sex
+ "</td ><td><button type='button' class='btn btn-success' onclick='editUser("
+ this.id
+ ")'>修改</button> </td></tr></tbody>"
});
$("#tt").html(str);
}
});