• 技术文章 >web前端 >Bootstrap教程

    bootstrap less是什么

    藏色散人藏色散人2020-11-30 17:21:23原创395

    bootstrap less是一个CSS预处理器,让CSS具有动态性;其中bootstrap.less文件中导入了一些其他的less文件,该文件中没有任何代码,而forms.less文件包含了表单布局、输入框类型的样式等等。

    本教程操作环境:windows10系统、bootstrap3.0,本文适用于所有品牌的电脑。

    推荐:《bootstrap教程

    Bootstrap LESS

    Less 是一个 CSS 预处理器,让 CSS 具有动态性。

    另一方面,Bootstrap 是一个快速开发 Web App 和站点的工具包。

    在本教程中,我们将讨论了有关使用带有 Less CSS 的 Bootstrap 知识。这样,您可以在 CSS 中使用 Bootstrap 的 Less 变量、混合(mixins)和嵌套( nesting)。

    获取 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 页面包含下面代码:

    <link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
    <script src="js/less-1.1.5.min.js"></script>

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

    以上就是bootstrap less是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:ionic bootstrap区别是什么 下一篇:bootstrap如何去掉遮罩层
    线上培训班

    相关文章推荐

    • 快速入门BootstrapVue• 谈谈初学Bootstrap需掌握的知识点• less百行代码实现bootstrap栅格布局• ionic bootstrap区别是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网