bootstrap怎么使用[编辑]

---

一、简介

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT ，它简洁灵活使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成，是目前最受欢迎的前端框架。

二、特性

    Les是一个 CSS 预处理器，让 CSS 具有动态性。另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins(混合)和 nesting(嵌套)。

三、使用精简教程

base.html

<!--meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

base.html中已经引入了bootstrap，将其保存，我们就可以使用bootstrap提供的样式了。

字体图标

bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：

按钮

<button></button>标签用于创建按钮，bootstrap提供了丰富的按钮样式。

<h3>把图标显示在按钮里</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> 按钮</button>
按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。

下拉菜单

下拉菜单是最常见的交互之一，bootstrap提供了漂亮的样式。

输入框

通过<input></input>标签去创建输入框。

导航栏

导航栏作为整个网站的指引必不可少。

表单

人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用<form></form>标签来创建表单。

警告框

警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。

进度条

系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。