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. 【Java并发编程】:并发新特性—塞队列和阻塞栈

    阻塞队列 阻塞队列是Java5并发新特性中的内容,阻塞队列的接口是Java.util.concurrent.BlockingQueue,它有多个实现类:ArrayBlockingQueue.Delay ...

  2. 【转】Ext JS 集合1713个icon图标的CSS文件

    原文:http://extjs.org.cn/node/715 由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上 ...

  3. Postman—使用数据文件

    前言 数据文件是非常强大的方式使用不同的测试数据来测试我们的API,以检查它们是否在各种情况下都能正常运行.我们可以认为数据文件是“Collection Runner”中每个请求的参数.下面,通过一个 ...

  4. PCI配置空间简介

    一.PCI配置空间简介 PCI有三个相互独立的物理地址空间:设备存储器地址空间.I/O地址空间和配置空间.配置空间是PCI所特有的一个物理空间.由于PCI支持设备即插即用,所以PCI设备不占用固定的内 ...

  5. Innosetup(pascal)标签控件label换行

    Label1.AutoSize := false; //先关闭自适应 Label1.WordWrap := true; //开启换行

  6. Nodejs学习笔记(二)—事件模块

    一.简介及资料  http://nodejs.org/api/events.html  http://www.infoq.com/cn/articles/tyq-nodejs-event events ...

  7. NAS DAS SAN 磁带机 tco

    部分摘录自: 百科:http://baike.baidu.com/link?url=7HOH3pJHfaxT-a01T0EhTZBnvvfMoyOZTthUbjMQM85LVxwfFP47YInuo1 ...

  8. [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  9. 转载:sql用逗号连接多张表对应哪个join?

    http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): 如果 ...

  10. Xcode8 log问题

    去除一堆log的方法: Xcode8--->Product---- Edit Scheme... -> Run -> Arguments, 在Environment Variable ...