<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="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="#">首页</a></li>
<li><a href="#">产品</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
资源
<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>
<li><a href="#">案例</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
登陆
</button>
<!-- 模态框（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">
用户名：<input type="text">
</div>
<div class="modal-body">
密码名：<input type="text">
</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>
<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="images/3d2d10d36265eff050b896aa555b022e.jpg" alt="First slide">
</div>
<div class="item">
<img src="images/5d0e1c909fb9929c6358472b02a92703.jpg" alt="Second slide">
</div>
<div class="item">
<img src="images/8e53d33c18e1bf43422f861aa922e20c.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>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<!--<div class="container"><!–div 大小和让文字居中–> 容器-->
<!--<div class="jumbotron"><!–显现container–>-->
<!--<h1>我的第一个 Bootstrap 页面</h1>-->
<!--<p>重置窗口大小，查看响应式效果！</p>-->
<!--</div>-->
<!--<div class="row"><!–just-align:center;–>-->
<!--<div class="col-sm-4"><!–12删排列。每列4个div–>-->
<!--<h3>第一列</h3>-->
<!--<p>学的不仅是技术，更是梦想！</p>-->
<!--<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>-->
<!--</div>-->
<!--<div class="col-sm-4">-->
<!--<h3>第二列</h3>-->
<!--<p>学的不仅是技术，更是梦想！</p>-->
<!--<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>-->
<!--</div>-->
<!--<div class="col-sm-4">-->
<!--<h3>第三列</h3>-->
<!--<p>学的不仅是技术，更是梦想！</p>-->
<!--<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。-->
<!--initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。-->
<!--在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。-->
<!--通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。-->
<!--注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！-->
<!--Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。-->
<!--使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。-->
<!--通过属性 @link-color 设置全局链接的颜色。-->
<!--Bootstrap 使用 Normalize 来建立跨浏览器的一致性。-->
<!--Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。-->
<!--container；容器；-->
<!--Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看 bootstrap.css 文件中的这个 .container class。-->
<!--//2：：网格系统：本章节我们将讲解 Bootstrap 的网格系统（Grid System）。-->
<!--Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列-->
<!--工作原理-->
<!--行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。-->
<!--使用行来创建列的水平组。-->
<!--内容应该放置在列内，且唯有列可以是行的直接子元素。-->
<!--预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。-->
<!--列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。-->
<!--网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。-->
<!--1 1 1 1 1 1 1 1 1 1 1 1-->
<!--4 4 4-->
<!--4 8-->
<!--6 6-->
<!--12-->
<!--媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。-->
<!--Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。-->
<!--/* 超小设备（手机，小于 768px） */-->
<!--/* Bootstrap 中默认情况下没有媒体查询 */-->
<!--/* 小型设备（平板电脑，768px 起） */-->
<!--@media (min-width: @screen-sm-min) { ... }-->
<!--/* 中型设备（台式电脑，992px 起） */-->
<!--@media (min-width: @screen-md-min) { ... }-->
<!--/* 大型设备（大台式电脑，1200px 起） */-->
<!--@media (min-width: @screen-lg-min) { ... }-->
<!--媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：-->
<!--让我们来看下面这行代码：-->
<!--@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }-->
<!--对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。-->
<!--偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。-->
<!--为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。-->
<!--在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。-->
<!--了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。-->
<!--Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。-->
<!--您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。-->
<!--在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。-->
<!--由于 <address> 默认为 display:block;，您需要使用 <br> 标签来为封闭的地址文本添加换行。-->
<!--Bootstrap 允许您以两种方式显示代码：-->
<!--请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。-->
<!--<caption> 关于表格存储内容的描述或总结。-->
<!--如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：-->
</body>
</html>