Bootstrap是基于HTML5和CSS3开发的，来自 Twitter，是目前最受欢迎的前端框架。
通过一个简单的登录界面，来了解一下Bootstrap（参考http://www.williamghelfi.com/blog/2013/08/04/bootstrap-in-practice-a-landing-page/）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>A landing Page</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。-->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<style>
html{
background: url(img/1140376.jpg) no-repeat center center fixed;
-webkit-background-size: cover;/*Webkit*/
-moz-background-size: cover;/*Ｍozilla*/
-o-background-size: cover;/*Presto*/
background-size: cover;/*W3c标准*/
}
body{
padding-top:20px;
background: transparent;/*将body的背景设置为透明的*/
}
.panel{
background: rgba(255, 255, 255, 0.9);/*支持CSS3的浏览器，最后一项规定了不透明度*/
}
.margin-base-vertical{
margin:40px 0;
}
</style>
</head>
<body>
<div class="container"><!--Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器-->
<div class="row"><!--栅格系统-->
<div class="col-md-5 col-md-offset-3 panel"><!--栅格类col-md-4设置列的宽度，col-md-offset-4设置列偏移-->
<h2>I Need Your Information</h2>
<p class="text-success">Someone told me long ago there‘s a <mark>calm</mark> before the storm. I know, <em>It‘s been comin</em> for some time.</p>
<!--Marked text--><!--斜体-->
<p class="lead">I want to know,<abbr title="attribute"> have</abbr> you ever seen the rain?</p><!--使段落突出显示/基本缩率语-->
<p>When it‘s over, <del>so they say</del>, it‘ll <u>rain a sunny day</u>. I know,<strong>Shinin</strong> down like water.</p><!--删除、下划线、加重-->
<p class="bg-danger">This Just a try</p>
<form class="margin-base-vertical">
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="InputPassword">Password</label>
<input type="password" class="form-control" id="InputPassword" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File Input</label>
<input type="file" id="exampleInputFile"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Check me out </label>
</div>
<button type="submit" class="btn btn-success btn-lg">Sumbmit</button>
</form>
<blockquote><!--通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
<!--来源的名称可以包裹进 <cite>标签中。-->
</blockquote>
</div>
</div>
</div>
</body>
</html>
效果图如下
1、Bootstrap需要将页面设置成html5类型
2、布局容器
（1）.container 类用于固定宽度并支持响应式布局的容器。
（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（流式布局容器）
3、栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
4、每行结尾加<br>可以保留原有的格式
5、有辅助的情景文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
6、情景背景色
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
时间： 2024-10-12 08:14:39