<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo1：演示页面布局</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
<body>
<div class="container">
<div class="row" style="background-color:green;">顶部</div>
<div class="row">
<div class="col-lg-3 col-sm-4 col-xs-5" style="background-color:#5bc0de;">左</div>
<div class="col-lg-9 col-sm-8 col-xs-7" style="background-color:#8a6d3b;">右</div>
</div>
<div class="row" style="background-color:yellow;">底部</div>
</div>
</body>
</html>
<!--
知识点：
1.BS里的类，并不只是对应相应的标签，例如btn，也可以用在a标签上
2.BS的布局参数可以实现屏幕自适应性
一列等分为12格
超小设备手机：<768px .col-xs-
小型平板设备：768-992px .col-sm-
中型设备电脑：992-1200px .col-md-
大型设备电脑：>=1200px .col-lg-
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo2：按钮</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<body>
<div class="container">
<div class="row">
<!--按钮样式-->
<div class="col-lg-5">
<input type="button" value="按钮" class="btn btn-primary"/><br/>
<button class="btn">默认</button><br/>
<button class="btn btn-primary">主要</button><br/>
<button class="btn btn-info">信息</button><br/>
<button class="btn btn-success">成功</button><br/>
<button class="btn btn-warning">警告</button><br/>
<button class="btn btn-danger">危险</button><br/>
<button class="btn btn-link">其实我是按钮</button><br/>
<a class="btn btn-info">其实我是超链接</a><br/>
<button class="btn btn-warning btn-lg">大小</button><br/>
<button class="btn btn-warning btn-default">大小</button><br/>
<button class="btn btn-warning btn-sm">大小</button><br/>
<button class="btn btn-warning btn-xs">大小</button><br/>
<button class="btn btn-danger disabled">禁用</button><br/>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<button class="btn btn-info btn-block">块级</button><br/>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo3：图片</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body style="background-color:gray;">
<div class="container">
<div class="row">
<img src="img/zuozhu.jpg" style="height:300px;width:auto;"/>
<img class="img-rounded" src="img/zuozhu.jpg" style="height:300px;width:auto;"/>
<img class="img-circle" src="img/zuozhu.jpg" style="height:300px;width:auto;"/>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo4：图标（其实是字体，不是icon）</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<i class="glyphicon glyphicon-user text-info"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-film text-danger"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-lock" style="color:red;"></i>
</div>
<div class="row">
<ul>
<li><a href="#"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="glyphicon glyphicon-trash"></i> Delete</a></li>
<li><a href="#"><i class="glyphicon glyphicon-ban-circle"></i> Ban</a></li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo5：代码块</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<!--使用code在行内嵌入代码-->
<span>在springmvc中controller直接返回对象转为json是，配置一下：<code>mvc:annotation-driven</code></span>
<!--使用pre嵌入多行代码-->
<pre>
package com.entity;
public class Person {
private int id;
private String name;
private int age;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
</pre>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo6：表格</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<!--默认样式-->
<div class="col-lg-6">
<table class="table">
<thead>
<th>#</th>
<th>First Name</th>
<th> Last Name</th>
<th>Username</th>
</thead>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
</div>
<!--带边框和圆角的样式-->
<div class="row">
<div class="col-lg-6">
<table class="table table-bordered">
<thead>
<th>#</th>
<th>First Name</th>
<th> Last Name</th>
<th>Username</th>
</thead>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
</div>
<!--条纹样式-->
<div class="row">
<div class="col-lg-6">
<table class="table table-striped">
<thead>
<th>#</th>
<th>First Name</th>
<th> Last Name</th>
<th>Username</th>
</thead>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
</div>
<!--紧凑样式-->
<div class="row">
<div class="col-lg-6">
<table class="table table-condensed">
<thead>
<th>#</th>
<th>First Name</th>
<th> Last Name</th>
<th>Username</th>
</thead>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
</div>
<!--默认样式+可选行属性+悬停样式-->
<div class="col-lg-6">
<table class="table table-hover">
<thead>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</thead>
<tr class="success">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="info">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="danger">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo7：表单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<!--默认是垂直表单-->
<form role="form" >
<div class="form-group">
<label for="user">用户名</label>
<input class="form-control" type="text" name="user" id="user" placeholder="输入用户名"/>
<label for="pwd">密码</label>
<input class="form-control" type="password" name="pwd" id="pwd" placeholder="输入密码"/>
<span class="help-block" style="color:red;">错误信息</span>
<label>性别</label>
<div class="radio">
<label><input type="radio" name="sex"/>男</label>
<label><input type="radio" name="sex"/>女</label>
</div>
<label>爱好</label>
<div class="checkbox">
<label><input type="checkbox"/>篮球</label>
<label><input type="checkbox"/>足球</label>
</div>
<label>城市</label>
<select class="form-control"><!--可以加multiple-->
<option>==请选择==</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</div>
</form>
<!--内联表单-->
<form class="form-inline">
<div class="form-group">
<label>用户</label>
<input class="form-control" type="text"/>
</div>
<div class="form-group">
<label>密码</label>
<input class="form-control" type="password"/>
</div>
</form>
<!--水平排列的表单（默认是垂直的）-->
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">用户</label>
<div class="col-lg-10">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">密码</label>
<div class="col-lg-10">
<input class="form-control" type="password">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">性别</label>
<div class="col-lg-10 radio">
<label><input type="radio">男</label>
<label><input type="radio">女</label>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo8：组件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-12">
<div>
下拉符<span class="caret"></span>
</div>
<div>
关闭符<span class="close pull-left" style="color:red;">×</span>
</div>
<div>
<!--标签-->
<span class="labe label-default">默认标签</span>
<span class="labe label-primary">主要标签</span>
<span class="labe label-success">成功标签</span>
<span class="labe label-info">信息标签</span>
<span class="labe label-warning">警告标签</span>
<span class="labe label-danger">危险标签</span>
<!--徽章-->
<span class="badge" style="background:red;">8</span>
</div>
<div>
<!--下拉菜单-->
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
==请选择== <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">标题1</li>
<li><a href="">java</a></li>
<li class="divider"></li>
<li class="dropdown-header">标题2</li>
<li><a href="">css</a></li>
</ul>
</div>
</div>
<!--按钮组-->
<div class="col-lg-12">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-success">按钮2</button>
</div>
<div class="btn-group-vertical btn-group-sm">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-success">按钮2</button>
</div>
</div>
<!--输入框组-->
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input class="form-control" type="text" name="user" placeholder="请输入用户名"/>
</div>
</div>
<div class="col-lg-4 col-lg-offset-2">
<div class="input-group">
<input class="form-control" type="text" name="user" placeholder="请输入搜索内容"/>
<span class="input-group-addon">
<a href=""><i class="glyphicon glyphicon-search"></i></a>
</span>
<span class="input-group-btn">
<button class="btn btn-primary">搜索</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<!--列表组-->
<div class="list-group">
<a class="list-group-item active">
<h4 class="list-group-item-heading">标题1</h4>
<p class="list-group-item-text">文本1</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">标题2</h4>
<p class="list-group-item-text">文本2</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">标题3</h4>
<p class="list-group-item-text">文本3</p>
</a>
</div>
</div>
<div class="col-lg-12">
<!--分页-->
<div>
<ul class="pagination pagination-md">
<li><a href="">首页</a></li>
<li><a href="">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="active"><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">下一页</a></li>
<li><a href="">尾页</a></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<!-- 警告提示框-->
<div class="alert alert-warning alert-dismissable in fade">
<button class="close" data-dismiss="alert">×</button>
<a href="#" class="alert-link">警告</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">信息</a>
</div>
<div class="alert alert-success">
<a href="#" class="alert-link">成功</a>
</div>
</div>
<div class="col-lg-12">
<!--进度条-->
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:30%;"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap demo9：面板，导航栏</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
$("*[data-toggle='tooltip']").tooltip();//启用
$("*[data-toggle='popover']").popover();//启用
});
</script>
</head>
<body>
<div class="container">
<div class="col-lg-6">
<!--面板-->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">标题</h3>
</div>
<div class="panel-body">
内容
</div>
<div class="panel-footer">尾部</div>
</div>
</div>
<div class="col-lg-12">
<!--导航栏-->
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">搜狗音乐</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">华语</a></li>
<li class="active"><a href="#">港台</a></li>
<li><a href="#">欧美</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-6">
<!--响应式导航栏-->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mydiv">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">搜狗音乐</a>
</div>
<div class="collapse navbar-collapse" id="mydiv">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>首页</a></li>
<li><a href="#">华语</a></li>
<li><a href="#">港台</a></li>
<li><a href="#">欧美</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-12">
<!--面包屑-->
<ol class="breadcrumb">
<li><a href=“#”>首页</a></li>
<li><a href=“#”>联系我们</a></li>
<li class=“active”>七里街</li>
</ol>
</div>
<div class="col-lg-12">
<!--标签页-->
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#" data-toggle="tab">选项一</a></li>
<li><a href="#" data-toggle="tab">选项二</a></li>
<li><a href="#" data-toggle="tab">选项三</a></li>
</ul>
</div>
<div class="col-lg-12"> </div>
<div class="col-lg-12">
<!--带有内容的标签页-->
<ul id="myTab2" class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab">选项一</a></li>
<li><a href="#b" data-toggle="tab">选项二</a></li>
<li><a href="#c" data-toggle="tab">选项三</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="a">选项一的内容</div>
<div class="tab-pane fade" id="b">选项二的内容</div>
<div class="tab-pane fade" id="c">选项三的内容</div>
</div>
</div>
<div class="col-lg-6">
<!--组合面板-->
<div div="parent" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#p1" data-toggle="collapse" data-parent="parent">面板1</a>
</h4>
</div>
<div id="p1" class="panel-collapse collapse in" >
<div class="panel-body">
面板一的内容
</div>
</div>
</div>
<div class="panel panel-success" style="margin:0;">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#p2" data-toggle="collapse" data-parent="parent">面板2</a>
</h4>
</div>
<div id="p2" class="panel-collapse collapse" ><!--此处不加in，默认是折叠的-->
<div class="panel-body">
面板二的内容
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<!--提示工具-->
<span data-toggle="tooltip" title="提示信息" data-placement="top">博为峰</span>
<span data-toggle="popover" title="提示信息" data-placement="top" data-content="详细内容">博为峰</span>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<div class="col-lg-12">
<!--提示工具扩展-->
<span id="sp1" data-toggle="popover" title="提示内容" data-placement="top" data-content="扩张内容">请点击</span>
</div>
<script>
$("#sp1").popover()
</script>
</div>
</body>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
