Bootstrap作为一个非常流行的前端css框架,得到了非常多的应用。一般的使用方法都是直接download bootstrap.css,作为css文件引入到html的markup中,随后直接引用其定义的class,这样的使用模式有个问题:考虑下面的场景,你需要设计一个login form,在该表单中有一个button,通常情况下,你在html markup中使用.btn,.btn-primary预置的class。虽然没有什么大的问题,但是html本身不具有表意性。如果我们既要使用到bootstrap定义的那些类,又能在html中不要以.btn,.btn-primary来定义button的style,有什么办法呢?本文就提供一个思路,既满足这个需求,又能顺便减少生产的css文件尺寸。

1.下载bootstrap,解压后直接将less目录中的内容提出来,其他的全部删除,假设目录仍然取名为bootstrap(注意其他的非bootstrap代码部分都已经删除)

bootstrap/
├── alerts.less
├── badges.less
├── bootstrap.less
├── breadcrumbs.less
├── button-groups.less
├── buttons.less
├── carousel.less
└── ...

2.将上述bootstrap source放到自己的项目中

my-project/
└── assets/
└── less
├── bootstrap
└── style.less

3.由于我们打算将bootstrap作为mixin库,并不打算将所有内容输出到生产css文件中,所以可以随意修改bootstrap源文件。另外使用import as reference来importbootstrap,其预定义的所有class都作为mixin可以被自己的项目所引用,但是又不会输出到最终生产文件中。

4.在style.less中引入bootstrap.less

@import "bootstrap/bootstrap.less"

5.这样做的好处是我们可以在html markup中,去除所有bootstrp的class,替而代之的是有语义的html class!

比如:通常直接引用bootstrap.css的情况下的markup为:

<div class="well well-lg">
<p>If you'd like to get more information, join our mailing list</p>
<a href="/sign-up" class="btn btn-success">Sign up now!</a> </div>

而使用本文的方法后的应用模式变为:

// style.less
.sign-up { .well; .well-lg; a { .btn; .btn-success; } } <div class="sign-up">
<p>If you'd like to get more information, join our mailing list</p> <a href="/sign-up">Sign up now!</a>
</div>

  

bootstrap作为mixin库的应用模式的更多相关文章

  1. Android 设计模式实战之关于封装计费代码库的策略模式详谈

    写在之前 这周生活上出现了很多的不如意,从周一开始就觉得哪里出现了问题,然后就是各种烦躁的情绪,后来事情还真是如预感的那样发生了,很是心痛,但也无可奈何,希望大家都好好珍惜自己身边的人:友人,亲人,家 ...

  2. 使用WinIO库实现保护模式下的IO和内存读写

    问题已解决: 原因是函数的调用方式与WinIO中不一致,使用的时候漏掉了__stdcall. 函数原定义为: 在实际的GPIO读写中遇到以下问题: SetPortVal可正常写入,但是GetPortV ...

  3. Bootstrap Blazor 组件库 Row 布局组件(栅格系统)

    原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...

  4. bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

    前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...

  5. Bootstrap Blazor 组件库

    项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...

  6. 使用Crypto++库的CBC模式实现加密(二)

    前面已经有一篇介绍使用Crypto++库实现的加密的文章了,但是代码中考虑的不完全,所以就重新发了个二 C++封装: #include "zyaes.h" #include < ...

  7. 使用Crypto++库的CBC模式实现加密

    //***************************************************************************** //@File Name : scsae ...

  8. 表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大

    产品姐姐想法多,点击input项才能聚焦进行操作,点击外部不能有反应 好了...直入正题 为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹 <label for="l ...

  9. Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行

    今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...

随机推荐

  1. 关于类型Type

    每一个JC语法节点都含有type属性,因为做为所有JC语法节点的父节点JCTree含有type属性.其继承关系如下图. 下面看一下Type类的定义及重要的属性. public class Type i ...

  2. .Net Core全球化多语言

    参照:ASP.NET Core 全球化和本地化 步骤如下: 后台中的本地化. Startup.cs中注册服务并制定Resource文件的位置.注意:这里的位置不仅仅应用到Web层,如Infrastru ...

  3. Android之网络丢包事件

    原文链接 http://www.litrin.net/2013/03/01/android%E4%B9%8B%E7%BD%91%E7%BB%9C%E4%B8%A2%E5%8C%85%E4%BA%8B% ...

  4. 关于 centos 7系统,iptables透明网桥实现

    首先建立网桥:(使用bridge)    示例 桥接eth0 与 eth1 网口 /sbin/modprobe bridge /usr/sbin/brctl addbr br0 /sbin/ifup ...

  5. JavaScript学习总结(三)——闭包、IIFE、原型、函数与对象

    一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...

  6. Angular待办事项应用4——模拟web服务

    内存服务器 angular提供了一个快速建立测试用的web服务方法,内存服务器(in-memory),让我们不用等待后端开发的进度 安装npm包 npm install --save angular- ...

  7. jquery select change下拉框选项变化判断选中值

    <th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...

  8. Spring系列之——spring security

    1 搭建springboot 2 配置pom依赖(springboot版本为2.1.3) <dependency> <groupId>org.springframework.b ...

  9. java 获取两个日期之间的所有日期(年月日)

    前言:直接上代码 java 获取两个日期之间的所有日期(年月日) /** * 获取两个日期之间的日期,包括开始结束日期 * @param start 开始日期 * @param end 结束日期 * ...

  10. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...