Bootstrap LESS

简介

获取 Bootstrap 和 Less CSS

Bootstrap 官网：http://getbootstrap.com/

Less 官网：http://lesscss.org/

包含哪些内容

下载 Bootstrap，解压缩文件。Bootstrap 的 Less 组件位于 'lib' 目录下。自 Bootstrap v1.4.0 版本起，就包含有九个 less 文件。下面我们一起来看看这九个文件分别包含什么。

bootstrap.less

这是主要的 Less 文件。该文件中导入了一些其他的 less 文件。该文件中没有任何代码。

forms.less

这个 Less 文件包含了表单布局、输入框类型的样式。

mixins.less

这个 Less 文件让 CSS 代码可重复使用。

patterns.less

这个 Less 文件包含了重复的用户界面元素的 CSS 代码，不会被位于 scaffolding Less 文件中的基本样式覆盖。

reset.less

这个 Less 文件包含了 CSS 重置。这是 Eric Meyer 的 CSS 重置的一个更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。

scaffolding.less

这个 Less 文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。

tables.less

这个 Less 文件包含了创建表格的样式。

type.less

这个 Less 文件下可找到排版相关的样式。标题、段落、列表、代码等的样式位于这个文件里边。

variables.less

这个 Less 文件包含了要定制 Bootstrap 外观和感观的变量。

如何使用

如果要使用它，请在您的 HTML 页面包含下面代码：

请注意，less-1.1.5.min.js 不在 js 文件夹内，您需要下载并把它放置在指定的文件夹下。

LESS变量和变量值，以及用法指南

超链接

灰度色

强调色

按钮

表单

导航栏

表单状态和通知

Bootstrap 混合

基本的混合

基本的混合从本质上来说，就是包括整个或是部分代码片段。写法类似一个CSS类，可以随处调用。

.element {
  .clearfix();
}

带参数的混合

带参数的混合和基本混合很像，不同之处是前者可以接收参数(根据名称)，参数可以有默认值。

.element {
  .border-radius(4px);
}

易于定制

基本上Bootstrap所有的混合都保存在mixins.less， 这是一个出色的工具类.less文件，我们可以在任何一个.less文件中使用其中的混合。

因此，直接使用已有的混合或是自定义一个新混合皆可。

包含混合

实用工具

表单

排版

栅格系统

CSS3属性