类名设计,Bootsrap基本接纳

浅析 Bootstrap 的 CSS 类名设计

2014/05/08 · CSS ·
CSS

本文由 伯乐在线 –
CSS魔法
翻译。未经许可,禁止转发!
英文出处:markdotto。欢迎插手翻译组。

翻译注:目前在再一次规划一个 UI
框架,由此也在考察一些类似项目标特色和因素。在读到《Bootstrap
编码规范》时,顺着链接发现了其小编 @mdo 的一篇小说,其中讲到 CSS
类名的宏图思路。

在创设类似 Bootstrap 那样的 CSS
系统时,保持系统的不难性、稳定性、灵活性是十分紧要的。那并非易事,越发对于大型团队和档次来说,组件的数量大概会变得一定巨大。为了改正那种现象,你不妨考虑用前缀式类名取代链式类名。

在使用 链式类名 方案时,你可能会把一密密麻麻特定组件的 CSS
接纳符写成这么:

CSS

.success { … } .btn.success { .. } .alert.success { … }

1
2
3
.success { … }
.btn.success { .. }
.alert.success { … }

咱俩在此间设置了一个大局基础类
.success,它大概含有了成功按钮和成功提示框之间的有着共性。然后,在单个组件层面,大家又须求对它进行扩大或掩盖。然则,那种完全开放式的类名和链式风格令开发者面临一些麻烦和潜在痛点:

  • 本条基础类到底意味着怎么样
  • 怎样因素会在根层级受到震慑(译注:啥意思?)
  • 何以要素得以把 .success 类链到温馨身上
  • 它是还是不是可以被愈来愈壮大到越多的零件上
  • 假设一个 .success
    的实例要用白底绿字,而另一个要用绿底白字,怎么做?

同时那么些标题还只是冰山一角。这种方案未必很差,但假使可扩大性、不难性和灵活性是您的参天须求,那或者就不是最好的措施。此时,前缀式类名方案或许进一步契合您。

前缀式类名
将开发者引入一种更简便、更易维护的趋向,从而打造一个可增添的 CSS
系统。当我们抛开正规的基本功类的章程,并将各样组件的体裁用前缀限制起来时,大家的代码会化为这样:

CSS

.btn-success { … } .alert-success { … }

1
2
.btn-success { … }
.alert-success { … }

那样一来,基本功类被设定在组件级别,而不是全体系统级别。换句话说,我们的根基类成为了
.btn.alert,而不是
.success。所有组件之间都不碰面世样式和行事上的并行烦扰,因为大家把组件具备“成功景色”视为贯穿整个系统的一种概念。那就是说,各个组件在“成功”状态下的体制,唯有在
概念 层面才是相通的;而对此哪些 实现
那些样式,是被封锁在各种独立的组件内部的。不用担心通用的体裁还会在何地使用,也不用顾虑不可意料的副效用,这种办法使得种种组件越发平静和灵活。

营造组件是一项相当富有策略性并且强调细节的工作,在一个近似 Bootstrap
的系统中,组件必要自然具备独立性,以加强模块分离度和可定制性。大家透过那种办法来创制更好的代码和一个令人神采飞扬的连串。


初稿出处:
markdotto   译文出处:cssmagic
的博客(@CSS魔法)   

初稿出处:
markdotto   译文出处:cssmagic
的博客(@CSS魔法)   

Bootsrap

本身的体味

翻译注:如今在再一次规划一个 UI
框架,因而也在察看一些类似项目标特色和要素。在读到《Bootstrap
编码规范》时,顺着链接发现了其小编 @mdo 的一篇文章,其中讲到 CSS
类名的布署性思路。

翻译注:近年来在再一次设计一个 UI
框架,因而也在察看一些看似项目标表征和因素。在读到《Bootstrap
编码规范》时,顺着链接发现了其小编 @mdo 的一篇文章,其中讲到 CSS
类名的筹划思路。

用法:

小编观点

本身本人在 CMUI
第一版中,基本上接纳的是文章开首所说的“链式类名”风格。比如说,一个小号按钮的协会可能是那般的:

XHTML

<button type=”button” class=”cmBtn cmLarge”>Large
button</button>

1
<button type="button" class="cmBtn cmLarge">Large button</button>

而在 Bootstrap 中,类似的因素是如此的:

类名设计,Bootsrap基本接纳。XHTML

<button type=”button” class=”btn btn-lg”>Large
button</button>

1
<button type="button" class="btn btn-lg">Large button</button>

最初步自我并不曾觉得那两者有怎样两样——前一个类名用于挂载框架预约义的按钮样式,后一个类名用于指定按钮的尺码。把
Bootstrap 源码中持有的 .btn-lg 替换成 .cmBtn.cmLarge,不就跟本人的
CMUI 一样了嘛?我居然觉得 Bootstrap 的类命名有点啰嗦,.btn
.btn-lg 中的 btn- 不是再一次了吗?依然 CMUI 干净利落啊!

然则,看完那篇文章,我似乎体会到 Bootstrap
那种规划的便宜。我的精通只怕并不是原小编的出发点,但也无妨列举出来,仅供参考。

在创设类似 Bootstrap 那样的 CSS
系统时,保持系统的简单性、稳定性、灵活性是一定重大的。那并非易事,尤其对于大型集团和体系以来,组件的数码只怕会变得万分巨大。为了千锤百炼这种情形,你不妨设想用前缀式类名取代链式类名。

在打造类似 Bootstrap 那样的 CSS
系统时,保持系统的不难性、稳定性、灵活性是相当首要的。那并非易事,尤其对于大型团队和档次以来,组件的数据只怕会变得卓殊巨大。为了改进那种景色,你不妨考虑用前缀式类名取代链式类名。

<!DOCTYPE html>

用户意见

这两体系名风格的距离并不在于源码是怎么写的,而是在于开发者(那里指利用
Bootstrap
的开发者)在观察类名时的反射。我的领会是,差其他命名,对开发者的授意是见仁见智的

开发者们并不延续会遵守组件文档的言传身教来编排组件的布局代码。比如说,某些时候她们手头没有文档(或不想找文档),又恐怕他们所希望的体裁在文档中并不曾列出。他们只怕会抱着一种试试看的心境,尝试修改或结成手头的多少个类名,以期爆发某种新的体裁效果。

只要类名是普遍的(比如 CMUI 中的
.cmLarge),就很简单被拿来品尝——比如开发者会给一个 ul.cmList
元素伸张 .cmLarge 类并愿意获取一个中号的列表,但实际上 CMUI
并没有提供那种结合!那破坏了开发者的预料,导致心绪受挫,以致最后舍弃这几个组件库(夸张了点哈)。

但假诺类名是被一个“组件级”前缀限定的(比如 Bootstrap 中的
.btn-lg),那么它被开发者拿去组合到其余组件身上的大概性就相当低。尽管某个异想天开的开发者试图把
.btn-lg 改成 .dropdown-lg
并应用到一个下拉菜单上,当她败北时,他应有也一度办好心思准备了罢。

在使用 链式类名 方案时,你或者会把一文山会海特定组件的 CSS
选拔符写成这么:

在使用 链式类名 方案时,你只怕会把一多元特定组件的 CSS
接纳符写成那样:

<html lang=”en”>

结语

诸如此类看来,Bootstrap 的做法确有它的利益,我的 CMUI 2.0 不妨也尝试看。

你哪些评论那两连串名风格吗?不妨留下您的观点吗!

1 赞 收藏
评论

CSS

CSS

    <head>

至于小编:CSS魔法

亚洲必赢官网 1

百姓网前端工程师,移动 Web UI 框架
CMUI 作者,自称 “披着前端工程师外衣的设计师”。
个人主页 ·
我的稿子 ·
12 ·
    

亚洲必赢官网 2

.success { … } .btn.success { .. } .alert.success { … }

.success { … } .btn.success { .. } .alert.success { … }

        <meta charset=”utf-8″>

1
2
3
.success { … }
.btn.success { .. }
.alert.success { … }
1
2
3
.success { … }
.btn.success { .. }
.alert.success { … }

        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

咱俩在此地设置了一个大局基础类
.success,它只怕含有了中标按钮和成功提醒框之间的拥有共性。然后,在单个组件层面,我们又必要对它进行扩张或掩盖。不过,那种完全开放式的类名和链式风格令开发者面临一些苦恼和秘密痛点:

俺们在此间安装了一个大局基础类
.success,它只怕带有了中标按钮和成功提醒框之间的兼具共性。然后,在单个组件层面,我们又须求对它进行伸张或掩盖。可是,那种完全开放式的类名和链式风格令开发者面临一些干扰和神秘痛点:

亚洲必赢官网 ,        <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

  • 其一基础类到底意味着如何
  • 怎么样因素会在根层级受到震慑(译注:啥意思?)
  • 咋样因素得以把 .success 类链到自身随身
  • 它是或不是足以被进一步增加到越来越多的组件上
  • 只要一个 .success
    的实例要用白底绿字,而另一个要用绿底白字,如何是好?
  • 那些基础类到底意味着怎样
  • 哪些因素会在根层级受到震慑(译注:啥意思?)
  • 怎么要素得以把 .success 类链到祥和身上
  • 它是或不是能够被进一步壮大到更加多的零件上
  • 一经一个 .success
    的实例要用白底绿字,而另一个要用绿底白字,如何做?

        <title>Bootstrap的HTML标准模板</title>   

并且那个题目还只是冰山一角。这种方案未必很差,但假设可增加性、简单性和灵活性是你的万丈要求,这只怕就不是最好的法子。此时,前缀式类名方案或然进一步切合你。

而且那么些题目还只是冰山一角。那种方案未必很差,但假若可扩大性、简单性和灵活性是您的参天须求,那只怕就不是最好的方法。此时,前缀式类名方案或许进一步切合你。

        <!– Bootstrap –>

前缀式类名
将开发者引入一种更简单、更易维护的主旋律,从而打造一个可伸张的 CSS
系统。当大家抛开正规的底子类的格局,并将各种组件的体裁用前缀限制起来时,大家的代码会变成那样:

前缀式类名
将开发者引入一种更简明、更易维护的势头,从而营造一个可伸张的 CSS
系统。当我们抛开正规的基础类的不二法门,并将各个组件的样式用前缀限制起来时,大家的代码会化为那样:

        <link href=”css/bootstrap.min.css” rel=”stylesheet”>

CSS

CSS

        <!–你本身的体裁文件
–>

.btn-success { … } .alert-success { … }

.btn-success { … } .alert-success { … }

        <link href=”css/your-style.css” rel=”stylesheet”>        

1
2
.btn-success { … }
.alert-success { … }
1
2
.btn-success { … }
.alert-success { … }

        <!– 以下七个插件用于在IE8以及以下版本浏览器接济HTML5成分和媒体询问,借使不要求用可以移除
–>

那样一来,基本功类被设定在组件级别,而不是整个系统级别。换句话说,大家的基本功类成为了
.btn.alert,而不是
.success。所有组件之间都不会冒出样式和表现上的彼此烦扰,因为大家把组件具备“成功景色”视为贯穿整个系统的一种概念。那就是说,各个组件在“成功”状态下的样式,唯有在
概念 层面才是相通的;而对此哪些 实现
这一个样式,是被封锁在各种独立的组件内部的。不用顾虑通用的体裁还会在哪儿使用,也不用顾虑不可意料的副功能,那种办法使得各样组件尤其平静和灵活。

那样一来,基本功类被设定在组件级别,而不是成套系统级别。换句话说,大家的基础类成为了
.btn.alert,而不是
.success。所有组件之间都不见面世样式和行事上的竞相困扰,因为我们把组件具备“成功景观”视为贯穿整个系统的一种概念。这就是说,各个组件在“成功”状态下的样式,唯有在
概念 层面才是相通的;而对此什么 实现
那一个样式,是被封锁在各个独立的组件内部的。不用担心通用的样式还会在何地使用,也不用顾虑不可意料的副功用,那种格局使得各种组件越发安定和灵活。

        <!–[if lt IE 9]>

营造组件是一项极度富有策略性并且强调细节的劳作,在一个像样 Bootstrap
的系统中,组件须要自然具备独立性,以增长模块分离度和可定制性。大家透过这种情势来成立更好的代码和一个令人美观的门类。

构建组件是一项极度富有策略性并且强调细节的做事,在一个接近 Bootstrap
的系统中,组件须求自然具备独立性,以拉长模块分离度和可定制性。大家通过那种形式来制作更好的代码和一个令人热情洋溢的项目。

        <script
src=”;



        <script
src=”;

自家的咀嚼

自个儿的认知

        <![endif]–>

作者观点

本身要好在 CMUI
第一版中,基本上接纳的是作品初叶所说的“链式类名”风格。比如说,一个中号按钮的构造或然是这么的:

XHTML

<button type=”button” class=”cmBtn cmLarge”>Large
button</button>

1
<button type="button" class="cmBtn cmLarge">Large button</button>

而在 Bootstrap 中,类似的元素是那样的:

XHTML

<button type=”button” class=”btn btn-lg”>Large
button</button>

1
<button type="button" class="btn btn-lg">Large button</button>

最开端本身并没有觉得那两者有何样两样——前一个类名用于挂载框架预约义的按钮样式,后一个类名用于指定按钮的尺码。把
Bootstrap 源码中兼有的 .btn-lg 替换成 .cmBtn.cmLarge,不就跟本人的
CMUI 一样了呗?我仍然以为 Bootstrap 的类命名有点啰嗦,.btn
.btn-lg 中的 btn- 不是双重了吧?仍然 CMUI 干净利落啊!

可是,看完那篇小说,我如同体会到 Bootstrap
那种安插的补益。我的知道大概并不是原小编的着眼点,但也不妨列举出来,仅供参考。

小编观点

本身要好在 CMUI
第一版中,基本上选拔的是小说先导所说的“链式类名”风格。比如说,一个中号按钮的结构或者是这么的:

XHTML

<button type=”button” class=”cmBtn cmLarge”>Large
button</button>

1
<button type="button" class="cmBtn cmLarge">Large button</button>

而在 Bootstrap 中,类似的要素是那样的:

XHTML

<button type=”button” class=”btn btn-lg”>Large
button</button>

1
<button type="button" class="btn btn-lg">Large button</button>

最开首自我并不曾觉得那两者有怎么着不同——前一个类名用于挂载框架预约义的按钮样式,后一个类名用于指定按钮的尺码。把
Bootstrap 源码中所有的 .btn-lg 替换成 .cmBtn.cmLarge,不就跟自家的
CMUI 一样了呗?我甚至觉得 Bootstrap 的类命名有点啰嗦,.btn
.btn-lg 中的 btn- 不是再次了呢?照旧 CMUI 干净利落啊!

唯独,看完那篇文章,我就如体会到 Bootstrap
这种规划的益处。我的了然大概并不是原小编的落脚点,但也无妨列举出来,仅供参考。

    </head>

用户意见

那两体系名风格的歧异并不在于源码是怎么写的,而是在于开发者(那里指使用
Bootstrap
的开发者)在观察类名时的影响。我的知情是,不等的命名,对开发者的授意是例外的

开发者们并不延续会根据组件文档的示范来编排组件的构造代码。比如说,某些时候他俩手头没有文档(或不想找文档),又恐怕他们所希望的样式在文档中并从未列出。他们恐怕会抱着一种试试看的心气,尝试修改或结成手头的多少个类名,以期爆发某种新的样式效果。

若果类名是大规模的(比如 CMUI 中的
.cmLarge),就很不难被拿来尝试——比如开发者会给一个 ul.cmList
成分扩展 .cmLarge 类并期望得到一个中号的列表,但骨子里 CMUI
并不曾提供这种重组!那破坏了开发者的预想,导致思想受挫,以致最后甩掉那么些组件库(夸张了点哈)。

但假使类名是被一个“组件级”前缀限定的(比如 Bootstrap 中的
.btn-lg),那么它被开发者拿去组合到其他组件身上的大概性就至极低。就算某个异想天开的开发者试图把
.btn-lg 改成 .dropdown-lg
并应用到一个下拉菜单上,当她失利时,他应有也曾经做好情绪准备了罢。

用户意见

这两体系名风格的差异并不在于源码是怎么写的,而是在乎开发者(那里指使用
Bootstrap
的开发者)在观察类名时的反响。我的敞亮是,今非昔比的命名,对开发者的暗示是不同的

开发者们并不总是会依据组件文档的以身作则来编排组件的社团代码。比如说,某些时候她们手头没有文档(或不想找文档),又或许他们所希望的体制在文档中并没有列出。他们或然会抱着一种试试看的情怀,尝试修改或结成手头的多少个类名,以期暴发某种新的体制效果。

一经类名是大面积的(比如 CMUI 中的
.cmLarge),就很简单被拿来品尝——比如开发者会给一个 ul.cmList
成分增添 .cmLarge 类并愿意获取一个小号的列表,但其实 CMUI
并没有提供那种结合!那破坏了开发者的预想,导致心绪受挫,以致最终放任这些组件库(夸张了点哈)。

但只要类名是被一个“组件级”前缀限定的(比如 Bootstrap 中的
.btn-lg),那么它被开发者拿去组合到别的组件身上的大概性就非常低。尽管某个异想天开的开发者试图把
.btn-lg 改成 .dropdown-lg
并应用到一个下拉菜单上,当她失败时,他应有也曾经做好心思准备了罢。

    <body>

结语

那般看来,Bootstrap 的做法确有它的功利,我的 CMUI 2.0 不妨也蓄势待发看。

您什么评论那两系列名风格吗?不妨留下您的视角呢!

赞 1 收藏 1
评论

结语

如此看来,Bootstrap 的做法确有它的好处,我的 CMUI 2.0 不妨也蓄势待发看。

你怎么样评价那两连串名风格吗?不妨留下你的视角吗!

赞 1 收藏 1
评论

        <h1>Hello, world!</h1>

        

        <!– 如若要采用Bootstrap的js插件,必须先调入jQuery –>

        <script
src=”;

        <!– 包蕴富有bootstrap的js插件可能可以按照须求运用的js插件调用 –>

        <script
src=”;

    </body>

</html>

 

 

标题样式:

Bootstrap中得以由此class名完成h1-h6比如:<div class=”h1″>Bootstrap标题</div>

 

在Web的营造中,平常会赶上在一个标题前面紧跟着一行小的副标题:

<h1>Bootstrap标题<small>我是副标题</small></h1>

 

.lead   :增大文本字号,加粗;

给文本添加颜色,通过颜色来强调:

.text-muted:提示,使用浅紫色(#999)

.text-primary:首要,使用绿色(#428bca)

.text-success:成功,使用浅黄色(#3c763d)

.text-info:公告音信,使用浅黄色(#31708f)

.text-warning:警告,使用红色(#8a6d3b)

.text-danger:危险,使用粉红色(#a94442)

 

文本对其:在CSS中平常使用text-align来落实文件对其,bootstrap中:

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

 

Bootstrap提供了一套响应式移动装备优先的流式栅格系统,随着显示器或视口(viewport)尺寸的增加,系统会自动分成最多12列。

 

通过class来
操作在对应的显示屏上的布局

手机显示屏(<768px) 类前缀.col-xs-

机械显示器(>=768px)类前缀.col-sm-

中级显示器(>=992px)类前缀.col-md-

大屏幕  (>=1200px)类前缀.col-lg-

列数都为12;所有的列(column)必须放在
.row内

<div class=”row”>

<div class=“col-xs-12  clo-md-8  clo-md-6  col-lg-4”>

<div class=“col-xs-12  clo-md-4  clo-md-6  col-lg-4”>

</div>

 

实例:

<div class=”container”>

<div class=”row”>

内容

</div>

</div>

将最外层的布局元素.container修改为 .container-fluid
 就可以将定位宽度的栅格布局转换成100%肥瘦的布局

偏移:

突发性大家不期待相邻的列紧挨在一块,可以用列偏移(offset)来促成
 给要偏移的要素加 .col-md-offset-*   (*号表示需求偏移的列数)

例如:“col-md-offset-4”就是在中游屏幕的时候向右偏移4列

 

列排序:

列排序就是改变列表的取向,就是改变左右生成,并且安装浮动的距离,通过添加类名完成:

“col-md-push-*”和”col-md-pull-*”(*号表示偏移列数)

向右偏移写push   向左写pull;

 

列的嵌套:

Bootstrap框架还辅助列的嵌套

您可以在列中添加一个依旧多个行(rom),然后在那几个容器中插入列(像后面的等同)

嵌套的列  在写.col-md-*
 的时候是按照父盒子的底蕴上 再展开分红

 

图标:

Bootstrap框架中也为大家提供了近200个例外的icon图片,而这几个图标都是运用CSS3的@font-face属性合作字体来兑现的icon效果。

如<span class=”glypicon
glyphicon-search”></span>

效果:

 亚洲必赢官网 3

 

 

按钮:Bootstrap中按钮通过类名“btn”来完毕;

<button class=”btn”>基本按钮</button>

效果:

 亚洲必赢官网 4

 

在bottstrap中还足以应用在其余标签元素上,要求在标签元素上添加类名“btn”
<input type=”submit” class=”btn btn-default”
value=”input标签按钮”/>
<div class=”btn btn-default”>div标签按钮</div>
<span class=”btn btn-default”>span标签按钮</span>

 亚洲必赢官网 5

 

按钮风格:

Bootstap中除了默许的按钮风格还有其余三种风格,作用雷同,不一致在于按钮的背景颜色,边框颜色和文书颜色;

代码如下:

<button class=”btn btn-default”>默许按钮</button>
<button class=”btn btn-primary”>首要按钮</button>
<button class=”btn btn-success”>成功按钮</button>
<button class=”btn btn-warning”>警告按钮</button>
<button class=”btn btn-danger”>危险按钮</button>
<button class=”btn btn-link”>链接按钮</button>

效果:

 亚洲必赢官网 6

按钮大小:

在bootstrap中对按钮的大大小小也可以定制,通过在基础按钮.btn的底子上加码类名来定制按钮大小

代码:

<button class=”btn btn-primary btn-lg”>大型按钮</button>
<button class=”btn btn-primary “>正常按钮</button>
<button class=”btn btn-primary btn-sm”>小型按钮</button>
<button class=”btn btn-primary btn-xs”>微型按钮</button>

效果:

 亚洲必赢官网 7

按钮活动状态:

本着按钮的情事小果果首要分为2种,活动状态和剥夺状态

活动状态首要不外乎悬浮状态(hover),点击状态(active)和纽带状态(focus)

代码:

<button class=”btn btn-default active”>点击状态</button>
<button class=”btn btn-primary focus”>宗旨状态</button>
<button class=”btn btn-success hover”>悬浮状态</button>

效果:

 亚洲必赢官网 8

剥夺状态:要禁用按钮有二种方法完毕;

在标签中添加disabled属性;

在要素标签中添加类名”disabled”

代码:

<button class=”btn btn-primary ” disabled=”disabled”>通过disabled属性禁用按钮</button>
<button class=”btn btn-primary disabled”>通过添加类名disabled禁用按钮</button>
<button class=”btn btn-primary “>未禁用的按钮</button>

效果:

 亚洲必赢官网 9

 

网站地图xml地图