bootstrap作为mixin库的应用模式
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库的应用模式的更多相关文章
- Android 设计模式实战之关于封装计费代码库的策略模式详谈
写在之前 这周生活上出现了很多的不如意,从周一开始就觉得哪里出现了问题,然后就是各种烦躁的情绪,后来事情还真是如预感的那样发生了,很是心痛,但也无可奈何,希望大家都好好珍惜自己身边的人:友人,亲人,家 ...
- 使用WinIO库实现保护模式下的IO和内存读写
问题已解决: 原因是函数的调用方式与WinIO中不一致,使用的时候漏掉了__stdcall. 函数原定义为: 在实际的GPIO读写中遇到以下问题: SetPortVal可正常写入,但是GetPortV ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案
前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...
- Bootstrap Blazor 组件库
项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...
- 使用Crypto++库的CBC模式实现加密(二)
前面已经有一篇介绍使用Crypto++库实现的加密的文章了,但是代码中考虑的不完全,所以就重新发了个二 C++封装: #include "zyaes.h" #include < ...
- 使用Crypto++库的CBC模式实现加密
//***************************************************************************** //@File Name : scsae ...
- 表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大
产品姐姐想法多,点击input项才能聚焦进行操作,点击外部不能有反应 好了...直入正题 为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹 <label for="l ...
- Bootstrap Blazor 开源UI库介绍-Table 虚拟滚动行
今天我们来介绍一下 Bootstrap Blazor 中 Table 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...
随机推荐
- 【Java并发编程】:并发新特性—塞队列和阻塞栈
阻塞队列 阻塞队列是Java5并发新特性中的内容,阻塞队列的接口是Java.util.concurrent.BlockingQueue,它有多个实现类:ArrayBlockingQueue.Delay ...
- 【转】Ext JS 集合1713个icon图标的CSS文件
原文:http://extjs.org.cn/node/715 由于最近在研究Extjs4.1.1,没想到Extjs没有自带的iconCls所使用的图标样式css,就是用那个写那个的,纠结了半天,网上 ...
- Postman—使用数据文件
前言 数据文件是非常强大的方式使用不同的测试数据来测试我们的API,以检查它们是否在各种情况下都能正常运行.我们可以认为数据文件是“Collection Runner”中每个请求的参数.下面,通过一个 ...
- PCI配置空间简介
一.PCI配置空间简介 PCI有三个相互独立的物理地址空间:设备存储器地址空间.I/O地址空间和配置空间.配置空间是PCI所特有的一个物理空间.由于PCI支持设备即插即用,所以PCI设备不占用固定的内 ...
- Innosetup(pascal)标签控件label换行
Label1.AutoSize := false; //先关闭自适应 Label1.WordWrap := true; //开启换行
- Nodejs学习笔记(二)—事件模块
一.简介及资料 http://nodejs.org/api/events.html http://www.infoq.com/cn/articles/tyq-nodejs-event events ...
- NAS DAS SAN 磁带机 tco
部分摘录自: 百科:http://baike.baidu.com/link?url=7HOH3pJHfaxT-a01T0EhTZBnvvfMoyOZTthUbjMQM85LVxwfFP47YInuo1 ...
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
- 转载:sql用逗号连接多张表对应哪个join?
http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): 如果 ...
- Xcode8 log问题
去除一堆log的方法: Xcode8--->Product---- Edit Scheme... -> Run -> Arguments, 在Environment Variable ...