bootstrap 中的 less

用户5760343

发布于 2019-07-05 10:02:22

7600

发布于 2019-07-05 10:02:22

文章被收录于专栏：sktj

Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。

对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

可以通过两种方式使用 Bootstrap：使用编译后的 CSS 文件，或者使用 Less 源码文件。若要编译 Less 文件，请参考编译Bootstrap的内容，以了解如何设置开发环境并运行必须的编译指令。

变量

整个 Bootstrap 项目中使用了大量的变量，这些变量被用来代表颜色、内边距、外边距、字体等。详细内容请参考定制工具。

1、颜色

Bootstrap 使用了两种颜色模式：灰度颜色和语义颜色。

灰度颜色用于快速获取常用的黑色色调。如：

@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

</pre>

得到的颜色如图 2‑84所示：

灰度颜色

语义颜色包含了各种赋予语义的颜色值。如：

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

</pre>

得到的颜色如图 2‑85所示：

语义颜色

在你的项目中，你可以直接使用这些预定义的颜色变量，或者重新为其赋予别名，使其更有语义。如：

// 直接使用
.masthead {
background-color: @brand-primary;
}
// 使用别名
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}

</pre>

2、脚手架

某几个变量是改变网站外观的关键要素。如：

@body-bg: #fff;
@text-color: @black-50;

</pre>

3、链接

仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。如：

// 变量
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// 使用
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}

</pre>

注意：@link-hover-color使用了 Less 提供的一个内置函数，用于自动为鼠标悬停设置合适的颜色。你还可以使用darken、lighten、saturate和desaturate等 Less 内置的函数。

4、排版

通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。

@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;

</pre>

5、图标

以下两个变量用于设置图标文件的位置和文件名。

@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";

</pre>

6、组件

组件贯穿整个 Bootstrap 框架，他们通过一些变量来设置默认值。下面列出的是常用的几个。

@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;

</pre>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.06.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

break

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

bootstrap 中的 less

bootstrap 中的 less

变量

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐