bootstrap为什么不直接使用.btn-default而要使用.btn.btn-default实现同样的效果?

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。因此你想到的好处是对的，基础结构和视觉变量分离。

至于说如何使用起来简单，这就带出了一件事：多数 Bootstrap 的用户使用该框架的姿势都是错的！默认提供的 class 直接拿来用？Too Young Too Simple！

默认提供的 class 只适用于快速搭建原型，理论上当产品进入正式的开发阶段，Bootstrap 就可以丢弃不用了。当然你可以选择基于 Bootstrap 进行正式开发，但此时就不要拿默认的 class 来搞，一是 class 老长一串写起来用起来不方便，二是直接使用默认的 class 不便于扩展和微调，往往必须再另写规则去覆盖，这不合道理。

正确的姿势是什么呢？首先，你得把 bootstrap.css 去掉，换成 less／sass 版本的 Bootstrap，于是接下来你的样式开发就要基于某种预处理语言了。

然后，把你的原型整理好，开始替换里面各组件的样式。比如按钮，你可以重写一个（或几个，视设计而定）按钮的样式，使用预处理语言的机制把 Bootstrap 的 mixin 混入进来再加以自己的扩展或修改，随手举个例子：

.btn-standout {
@extend .btn;
@extend .btn-block;

@media (max-width: $screen-xs-max) {@include button-size($padding-large-vertical,$padding-large-horizontal,$font-size-large,$line-height-large,$border-radius-large);
}&.sell {@extend .btn-primary;
}

}
这是我随手搜索的一个例子，可以看出最终生成的是一个独立的 class：.btn-standout，首先它扩展了默认的 .btn 和 .btn-block，然后又设置了一个响应式规则，在某种情况下改变了这个按钮的尺寸，接着如果追加 .sell 的话，则使用 .btn-primary 的颜色定义。当然，这里面的变量就要你预先自定义好了。

像 button-size 这样的 mixin，在 bootstrap-sass 的源码里就可以找到，你可以通过默认的那些 class 的定义顺藤摸瓜搞清楚它们都是做什么的，然后依照自己的需要灵活使用它们。这才是使用 Bootstrap 的正确姿势，会用的人写出来的东西，单从 HTML 上引用的 class 你根本就看不出他是否使用了 Bootstrap，朝着这个目标迈进吧～

bootstrap为什么不直接使用.btn-default而要使用.btn.btn-default实现同样的效果?相关推荐

php switch case default,switch语句中必须有default选项吗？
switch语句中不是必须有default选项的.switch语句首先会找满足条件的case值做为执行后面的程序入口,若所有的case都不满足,则找default入口,若未找到则退出整个语句:defa ...
java default类型_java – 带有限定符@Default的ZZZZ类型的不满意依赖项
我有以下给出的豆子. @Singleton @DependsOn("DefaultEmailService") public class CustomerService imple ...
html中default是什么文件,Default是什么文件夹？Default文件夹可以删除吗？
C盘用户文件夹里的Default是什么文件夹,有什么用,能删除么?见怪不怪,其怪自败!偏偏很多人和笔者一样好奇心重!对这个问题穷追猛打,网上相关资料很少,笔者搜集整理了下面的内容,如果对您有微末的帮助 ...
mysql 中default什么意思_数据库中default的用法正确使用方法
数据库中default的用法的正确使用方法你清楚吗,今天学习啦小编就跟大家详细介绍下数据库中default的用法,希望能帮到大家. 数据库中default的用法的用法 SQL Server数据库def ...
普元 AppServer 6.5 部署了Platform6.6 default和governor，governor往default部署ecd，报错：Caused by:connect:Addresss
[问题] Platform6.6 default和governor 部署在AppServer6.5上,governor往default部署ecd,报错: Fails to deploy contrib ...
Bringing machine ‘default‘ up with ‘hyperv‘ provider==＞ default: Verifying Hyper-V is enabled报错解决
报错场景 Vagrant安装启动linux时,使用语句vagrant up出现报错报错原因 virtualbox版本与vagrant版本不对应,无法默认以virtualbox启动,导致用hyperv ...
如何更改Twitter Bootstrap模式框的默认宽度？
本文翻译自:How can I change the default width of a Twitter Bootstrap modal box? I tried the following: 我尝 ...
【代码片段】base样式--针对bootstrap
/* Document : base.cssCreated on : 2013-02-22Author : KojyaDescription : Style sheet for base. *//* ...
Bootstrap插件
1 BootStrap插件使用规则 1.1 单个引入 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js ...
Bootstrap插件之-按钮插件
按钮 button.js 按钮的功能很丰富.通过控制按钮的状态或创建一组按钮并形成一些新的组件,例如工具条. 跨浏览器兼容性在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择 ...

bootstrap为什么不直接使用.btn-default而要使用.btn.btn-default实现同样的效果?

bootstrap为什么不直接使用.btn-default而要使用.btn.btn-default实现同样的效果?相关推荐

最新文章

热门文章