<!--
get √
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 悬停表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover table-striped table-bordered table-condensed">
<!--
table 该框架的
table-hover 悬停效果
table-striped 斑马线效果
table-bordered 边框
table-condensed 变得更紧凑了
-->
<caption>悬停表格布局</caption> <!-- caption 定义标题 -->
<thead>
<!-- t head -->
<tr class="info">
<!--
info蓝色
tr 行
th 头
-->
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<!-- t body -->
<tr class="success">
<!--
success绿色
td 表行的单元
-->
<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>
</body>
<!-- get √ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 缩略图</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<!--
栅格系统，默认列等分12份
row 代表行
col 代表列
-->
<div class="col-sm-6 col-md-3">
<!--
sm是small小
md是middle中等
-->
<a href="../../img/6.jpg" class="thumbnail" >
<!-- thumbnail组件 -->
<img src="../../img/6.jpg" class="img-rounded"
alt="通用的占位符缩略图">
</a>
<!--
img-rounded 正方形的
img-circle 圆形的
img-thumbnail 缩略图形式的
-->
</div>
<div class="col-sm-6 col-md-3">
<a href="../../img/9.jpg" class="thumbnail">
<img src="../../img/9.jpg" class="img-circle"
alt="通用的占位符缩略图">
<!--
指定了替代文本,
用于在图像无法显示或者用户禁用图像显示时,
代替图像显示在浏览器中的内容。
-->
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="../../img/7.jpg" class="thumbnail">
<img src="../../img/7.jpg" class="img-thumbnail"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="../../img/9.jpg" class="thumbnail">
<img src="../../img/9.jpg"
alt="通用的占位符缩略图">
</a>
</div>
</div>
</body>
</html>
<!--
get √
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 默认的导航栏</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation"><!-- 导航栏-->
<div class="container-fluid"><!--容器-->
<div class="navbar-header"><!-- 导航栏 头-->
<a class="navbar-brand" href="#">菜鸟教程</a><!-- 导航栏的标牌-->
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li><!-- active显示已经点击（灰色）-->
<li><a href="#">SVN</a></li>
<li class="dropdown"><!-- 下拉触发器 -->
<!--
下拉按钮部分，可以用button标签，也可以用a标签
-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><!-- data-toggle="dropdown" 点击这个按钮会出现菜单部分-->
Java
<b class="caret"></b><!-- 三角符号 -->
</a>
<ul class="dropdown-menu"><!-- 下拉菜单 -->
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li><!-- 分割线 -->
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
<!--
get √
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 水平表单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<!--
form-horizontal 水平表单
以将 label 标签和控件组水平并排布局
这样做将改变 .form-group 的行为，
使其表现为栅格系统中的行（row），
因此就无需再额外添加 .row 了。
role="form"定义form表单元素为form功能角色使用；
-->
<div class="form-group">
<!--
.form-group 中可以获得最好的排列
-->
<label for="firstname" class="col-sm-2 control-label">名字</label>
<!--
for：是目标哪个标签
control-label 水平控制
-->
<div class="col-sm-10">
<!--
form-control 更好的排列
-->
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
<!--
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"> 请记住我
<!--
checkbox 可勾选的
-->
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- ·
offset 偏移
-->
<button type="submit" class="btn btn-default btn-warning btn-lg ">登录</button>
<!--
btn 基类
btn-default 该框架默认按钮
btn-warning 黄色按钮
--有很多
btn-lg 大按钮
--有很多
btn-block 块级按钮
-->
</div>
</div>
</form>
</body>
</html>
<!--
get √
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--
轮播图需要三层div，
第一层 指定carousel，意思是轮播图
-->
<!-- <script>
$('.carousel').carousel({
interval:2000 //默认2s切换
})
</script> -->
<div id="myCarousel" class="carousel slide" >
<!--
data-ride="carousel"：开启切换效果，默认为5妙切换，可以写js去控制
slide： 如果不想切换效果，可以滑动效果
-->
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<!--
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/6.jpg" alt="First slide">
</div>
<div class="item">
<img src="../../img/7.jpg" alt="Second slide">
</div>
<div class="item">
<img src="../../img/9.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!--
轮播图的图标
-->
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</body>
</html>
扫一扫
1124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
