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 组件的虚拟滚动行,什么是虚拟滚动呢,我查到的解释是:只渲染可视区域的列表项,非可见区域的 完全不渲染,在滚动条滚动时动态更新列表项 ...
随机推荐
- [转]asp.net core中的View Component
解读ASP.NET 5 & MVC6系列(14):View Component http://www.cnblogs.com/TomXu/p/4496486.html
- PHP CURL 伪造IP和来路
//随机IP function Rand_IP(){ $ip2id= round(rand(, ) / ); //第一种方法,直接生成 $ip3id= round(rand(, ) / ); $ip4 ...
- 《Android应用性能优化》1——代码
1.Java代码优化 1.1 代码执行 通常情况下,不必看应用的字节码.在平台是Android2.2(Froyo)和更高版本的情况下尤其如此,因在Android2.2中引入了实时(JIT)的编译器.D ...
- 共识算法:PBFT、RAFT
转自:https://www.cnblogs.com/davidwang456/articles/9001331.html 区块链技术中,共识算法是其中核心的一个组成部分.首先我们来思考一个问题:什么 ...
- 初识Docker和安装
什么是Docker Docker的构想是要实现“Build,Ship and Run Any App,Anywhere”,即通过对应用的封装(Packaging).分发(Distribution).部 ...
- 什么是汉明窗?加Hanmming窗的作用?
什么是汉明窗?加Hanmming窗的作用? 1.什么是汉明窗? 答:我是做语音识别的,我就从语音的角度跟你说一下吧. 语音信号一般在10ms到30ms之间,我们可以把它看成是平稳的.为了处理语音信号, ...
- 使用tcmalloc替换系统的malloc
https://blog.csdn.net/educast/article/details/79166553?utm_source=blogxgwz0 今天对服务器进行压测,模拟的请求量到4万次/分的 ...
- golang chan 发送接收测试数据
测试代码: package main import ( "fmt" "time" ) const ( num = 10000000 / ...
- JS计算字符串长度(兼容后端PHP)
/*** 计算字符串长度* 参数是要计算的字符串* 返回值当前字符串的长度*/function charactersLen (words) { let tempMapWordNum = {} let ...
- Asp.net MVC 移除不用的视图引擎
Asp.net MVC 默认提供两个视图引擎,分别为: WebFormViewEngine 和 RazorViewEngine.MVC在查找视图时,会按照指定的顺序进行查找.当我们的MVC程序未找到相 ...