Bootstrap 简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
优点:响应式设计,Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap 优点
(1)Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
(2)预处理脚本:虽然可以直接使用 Bootstrap 提供的 CSS 样式表,不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS 文件快速开发,也可以从源码定制自己需要的样式。
(3)一个框架、多种设备:你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备,这一切都是 CSS 媒体查询(Media Query)的功劳。
(4)Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
Bootstrap 包的内容
- 基本结构:Bootstrap 提供了一个带栅格系统、链接样式、背景的基本结构。
- CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
- 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
- JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
- 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
准备工作
- 下载Bootstrap框架核心文件。
- 下载jQuery文件。
- 下载HTML5兼容IE的JS插件。
HTML结构
1、Bootstrap框架的文档必须声明为HTML5文件类型,所以你的每一个页面都必须按照下面的格式进行设置:
<!DOCTYPE html>
<html lang="en">
......
</html>
2.添加HTML文档meta标记:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum=1.0,user-scalable=no">
3.引入所需要的核心文件,包括Bootstrap的CSS文件,jQuery插件,Bootstrap的JS核心文件,以及HTML5.JS文件。
<link rel="stylesheet" href="./css/bootstrap.css"/>
<script src="js/Less.js"></script>
<!-- jQuery文件,必须在bootstrap.min.js之前引入 -->
<script src="js/jquery-1.9.1.js"></script>
<!-- Bootstrap 核心 javascript文件-->
<script src="js/bootstrap.js"></script>
总结:Bootstrap主页制作可以分为三个步骤
- 使用HTML5基本文档类型,并写好网站声明。
- 引入必须的Bootstrap核心文件。
- 将页面代码放入container类容器中
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器和.container-fluid容器
.container
类用于固定宽度并支持响应式布局的容器.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
注意:由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
<div class="container">
<div class="row"> <!--抵消槽宽-->
<div class="colume col-lg-12 col-md-12 col-sm-12 col-xs-12">col-lg-12 col-md-12 col-sm-12 col-xs-12</div>
</div>
<div class="row">
<div class="colume col-lg-5 col-md-5 col-sm-5 col-xs-5">col-lg-5 col-md-5 col-sm-5 </div>
<div class="colume col-lg-7 col-md-7 col-sm-7 col-xs-7">col-lg-7 col-md-7 col-sm-7 col-xs-7</div>
</div>
<div class="row">
<div class="colume col-lg-4 col-md-4 "> col-lg-4</div>
<div class="colume col-lg-push-4 col-lg-4 col-md-4 "> col-lg-4</div>
</div>
<div class="row">
<div class="colume col-lg-4 col-md-4 "> col-lg-4</div>
<div class="colume col-lg-offset-4 col-lg-4 col-md-4 "> col-lg-4</div>
</div>
<div class="row">
<div class="colume col-lg-4 col-md-4 ">hh</div>
<div class="colume col-lg-pull-2 col-lg-4 col-md-4 "> col-lg-4</div>
</div>
</div>