BootStrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
BootStrap环境安装
从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
会看到两个按钮:
①Download Bootstrap:下载 Bootstrap。
可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
②Download Source:下载源代码。
直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码,您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于 less.js 的 CSS 提示。
Bootstrap代码样式
Bootstrap提供了代码样式,用于在页面上展示代码,以此来区分于正文的区别,如果是行内嵌套代码,可以用<code>
标签,但是对于代码中的符号要进行转换(<是<、>是>
)
例:
<!--正文中内嵌代码块-->
<p>
<code><section>
</code> should be wrapped as inline.
</p>
运行截图:
如果是代码块可以用<pre>
标签,同样的,代码中的要将代码中的尖括号做转换。例如:
<!--.pre-scrollable,其作用是设置max-height为350px,
并在垂直方向展示滚动条-->
<pre class="pre-scrollable">
<p>Sample text here...</p>
<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>
</pre>
一个使用了 Bootstrap 的基本的 HTML 模板:
<!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>
<h1>Hello, world!</h1>
</body>
</html>
运行结果:
BootStrap表格
基本的表格样式可以用 <table>
标签。
例如:
<h4>正常表格</h4>
<!--
\\利用.table-bordered为表格和其中的每个单元格增加边框
\\利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式
\\利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态
-->
<table class="table table-striped table-bordered table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>