什么是Bootstrap?
Bootstrap是基于HTML、CSS和JavaScript开发的简洁、直观、强悍的前端开发框架,用于开发响应式布局、移动设备优先的WEB项目,它的出现使得Web开发更加快捷。
附:
Bootstrap3开发的网站案例
谁适合阅读本教程?
只要您具备 HTML 和 CSS 的基础知识,您就可以阅读本教程,进而开发出自己的网站。在您学习完本教程后,您即可达到使用 Bootstrap 开发 Web 项目的中等水平。
历史
Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap是2011年八月在 GitHub 上发布的开源产品。
为什么使用Bootstrap?
为所有开发者、所有应用场景而设计。
Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
一个框架、多种设备
你的网站和应用能在Bootstrap的帮助下通过同一份代码快速、有效适配手机、平板、PC设备。
Bootstrap 包含的内容
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
实例演示
Bootstrap3 实例1 查看效果
<!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="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 3.0 演示页面</h1>
<p>在火狐浏览器下按Ctrl+Shift+M重置窗口大小,查看响应式效果!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>Bootstrap 3.0学习!</p>
<p>响应式网站学习,坚持就能成功!</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>Bootstrap 3.0学习!</p>
<p>响应式网站学习,坚持就能成功!</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>Bootstrap 3.0学习!</p>
<p>响应式网站学习,坚持就能成功!</p>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>