主流框架,响应式布局和BootStrap

SASS and LESS

任由是SASS,还是LESS,都能够视为一种基于CSS之上的高等语言,其指标是驱动CSS开采越来越灵敏和更强劲,这两个小编的痛感是对于程序员来讲,SASS的功能要远比LESS庞大,基本得以说是一种真正的编制程序语言了,而对于设计员,LESS则相对清晰明了,这里是克莉丝Coyier写的一篇关于SASS和LESS的背靠背比较,能够说是一对一中肯的(商量也一定有料喔)。当然,假如使用Rails之类的框架,基于SASS是会来的更实惠一些。


闲谈主流框架,Less/Sass/Compass/Bootstrap/H5bp » 社区 | Ruby China

正文为转发学习

1、什么是响应式布局

Compass and Blueprint

SASS和Compass的涉嫌,在不胜枚举人来看类似于ruby和rails,compass基于SASS,是多个着实含义上的编制程序框架,提供了大气的mixin(可见晓为函数库),无论是对css3繁杂的多浏览器写法的简化协理,还是促成种种大面积作用的helper,都以强硬而增加的。其它,包蕴ScottDavis和Eric 迈尔的主干团队,也能够说是全明星组合。

Blueprint是一套预订义的体裁,蕴涵对超越五成常用web交互组件的渲染,并且有一个壮大的格子布局种类(grid
system),就算不懂设计的技师,也能够选拔blueprint的暗中认可样式做出很雅观的页面。

Blueprint和Compass,是三个分工很显然的结合,前面三个担当样式渲染,前面一个则是基础框架和模块,可以说,在bootstrap诞生从前,是web开垦首要推荐的白金组合。


闲话主流框架,Less/Sass/Compass/Bootstrap/H5bp

CSS

lilu

于9时辰前公布

最终由 Rei 于6钟头前恢复生机

175次阅读

SASS and LESS

无论是是SASS,仍旧LESS,都足以视为一种基于CSS之上的高等语言,其目标是驱动CSS开拓更加灵敏和更有力,这两边作者的痛感是对于技术员来讲,SASS的效能要远比LESS强大,基本得以说是一种真正的编制程序语言了,而对于设计员,LESS则相对清晰明了,这里是ChrisCoyier写的一篇有关SASS和LESS的背靠背相比,能够说是一定中肯的(研讨也一定有料喔)。当然,假诺使用Rails之类的框架,基于SASS是会来的更利于一些。

 


 

Compass and Blueprint

SASS和Compass的关系,在广大人来看类似于ruby和rails,compass基于SASS,是二个的确含义上的编制程序框架,提供了大批量的mixin(可掌握为函数库),无论是对css3繁杂的多浏览器写法的简化接济,照旧促成各类大面积效用的helper,都以无往不胜而增加的。此外,包涵ScottDavis和Eric 迈尔的着力团队,也得以说是全歌星组合。

Blueprint是一套预约义的体制,包涵对绝大好多常用web交互组件的渲染,并且有三个强劲的格子布局种类(grid
system),即便不懂设计的技士,也足以利用blueprint的暗许样式做出非常漂亮的页面。

Blueprint和Compass,是二个分工很鲜明的重组,前面一个担当样式渲染,后面一个则是基础框架和模块,能够说,在bootstrap诞生以前,是web开拓首要推荐的白银组合。

 


 

HTML5 Boilerplate

HTML5
Boilerplate项目(以下简称h5bp)则就像名字一模一样,达成的是三个web页面包车型地铁正式模板,极其针对html5进展了圆满优化,相同的时间也对老浏览器向后极其,基本上来讲,h5bp与体制相关的首要性部分,是compass的三个子集,然而h5bp并不只限于css,还暗中同意引进了许多很好的js开辟库,包括Modernizr和Jquery,再增加三个标准的index.html模板

h5bp是此处提到的有着框架中应用起来最利于的,当然受功效范围,她最适用的靶子是单页web
app或许静态页面,对于复杂的品种来讲,需求和其余框架做补偿。

主流框架,响应式布局和BootStrap。 


 

Twitter Bootstrap

后来而野心十足的Bootstrap跟上述又都不一致,她是遵照LESS的一套前端工具库,意图十分确定,想以一个门类,整合Compass,Blueprint,h5bp的对象意义,成为web前端的一站式消除方案。

  • 一套完整的根底css模块,但不及compass丰盛和强有力
  • 一套预订义样式表,蕴涵二个格子布局种类,和blueprint提供的好多,只是安顿风格不均等
  • 一组依据Jquery的js交互插件,那是Bootstrap真正有力的地点,也是他严峻意义上得以代替Blueprint的来头所在,那些非常不错的小插件,包蕴对话框,下拉领航等等,不但功用完善,而且足够精制,正在成为广大jquery项指标默许设计规范。

特地提一下,Bootstrap使用Normalize.css来进行Reset
CSS,这一档期的顺序已经成为了事实规范(超越Compass的Eric meyer
2.0),刚强推荐使用,别的前面说的h5bp也应用Normalize,因而,如若你在品种中并且接纳了h5bp和Bootstrap,
请注意,从不要求再引入h5bp的起初样式表style.css

 


 

So What?

说了一大堆,该来点结论了,近期对此web开采,越发是由程序员举办的full
stack开荒,最佳的结合是:

SASS+Compass+Bootstrap

如此那般不只能够采用SASS庞大的编制程序技术,Compass壮大的底部函数,又有啥不可获得Bootstrap丰盛的UI组件扶助。

只是,Bootstrap是依据LESS的,要让她们协同专门的职业,须要七个SASS的Bootstrap移植版本,幸而github上向来不缺那类项目,当前最佳的一个是bootstrap-sass

@ericguo
特别去看了眨眼之间间bootstrap-rails的代码,开采bootstrap-rails和bootstrap-sass在对bootstrap的翻译上实现差不离同样,只是有个别名字上的比不上,但是本人只是过了贰回相对较复杂的mixin.scss的中间贯彻,恐怕别的模块有一点都相当的大的异样也大概:)

在完毕大概的情况下,bootstrap-sass小编认为仍旧稍好一些,因为能够很有利地匡助compass,无论有无rails,都可以挂成compass的恢弘,那一点固然没有须求多多代码完结,但如故很有用的,终究用sass和rails的人主导都亟需compass和bootstrap一同坐班吧。

原著链接为:

响应式布局是EthanMarcotte在二零零六年七月份建议的三个定义,那么些定义是为焚薮而田移动互连网浏览而诞生的。

HTML5 Boilerplate

HTML5
Boilerplate项目(以下简称h5bp)则就如名字同样,完成的是一个web页面的正统模板,越发针对html5张开了巨细无遗优化,同期也对老浏览器向后格外,基本上来讲,h5bp与体制相关的第一部分,是compass的二个子集,可是h5bp并不只限于css,还默许引进了大多很好的js开拓库,包涵Modernizr和Jquery,再拉长八个尺码的index.html模板

h5bp是这里涉及的保有框架中应用起来最有利的,当然受作用界定,她最适用的靶子是单页web
app可能静态页面,对于复杂的类别来讲,需求和其他框架做补充。



1、SASS and LESS

大约,正是三个网址能够同盟多少个顶峰——而不是为种种终端做一个一定的版本。

Twitter Bootstrap

后来而野心十足的Bootstrap跟上述又都差别,她是依据LESS的一套前端工具库,意图非常醒目,想以二个体系,整合Compass,Blueprint,h5bp的靶子意义,成为web前端的一站式消除方案。

  • 一套完整的基础css模块,但比不上compass足够和强硬
  • 一套预订义样式表,包含三个格子布局体系,和blueprint提供的大都,只是安顿风格不一样
  • 一组依据Jquery的js交互插件,那是Bootstrap真正有力的地点,也是他严格意义上能够代替Blueprint的原由所在,那些极其不利的小插件,包含对话框,下拉领航等等,不但作用完善,而且那多少个精制,正在形成广大jquery项指标暗许设计标准。

特意提一下,Bootstrap使用Normalize.css来进展Reset
CSS,这一门类已经变为了事实规范(超越Compass的Eric meyer
2.0),刚烈推荐使用,此外前面说的h5bp也运用Normalize,因而,倘诺你在品种中并且接纳了h5bp和Bootstrap,
请注意,向来不须要再引进h5bp的始发样式表style.css


不论是是sass,依然less,都足以算得一种基于css之上的高端语言,其目标是驱动css开荒更外灵活和越来越强硬,这两个笔者的感到是对此程序员来讲,sass的效果与利益远比less庞大,基本能够说是一种真正的编制程序语言了,而对此设计员,less绝对清晰明了,这里(
Coyier写的一篇有关SASS和LESS的背靠背比较,能够说是一对一中肯的(评论也一定有料喔)。当然,假设选拔Rails之类的框架,基于SASS是会来的更有利于一些。

响应式互连网设计 ( 索罗德WD /
AWD)的出现,指标是为运动设备提供越来越好的经验,并且结合从桌面到手提式有线电话机的各样显示器尺寸和分辨率,用技艺来使网页适应从小到大(现在到超大)的不如分辨率的荧屏。

So What?

说了一大堆,该来点结论了,最近对于web开荒,特别是由工程师举办的full
stack开荒,最棒的构成是:

SASS+Compass+Bootstrap

这般既可以够应用SASS庞大的编制程序技巧,Compass庞大的最底层函数,又足以博得Bootstrap丰硕的UI组件协理。

只是,Bootstrap是基于LESS的,要让他俩协同专门的学问,必要四个SASS的Bootstrap移植版本,万幸github上未曾缺那类项目,当前最佳的二个是bootstrap-sass

@ericguo 极度去看了一下bootstrap-rails的代码,开采bootstrap-rails和bootstrap-sass在对bootstrap的翻译上落到实处大约同一,只是局地名字上的不等,不过笔者只是过了叁回绝对较复杂的mixin.scss的里边贯彻,恐怕其余模块有十分的大的歧异也恐怕:)

在落到实处差不离的情景下,bootstrap-sass作者以为照旧稍好一些,因为能够很有益地辅助compass,无论有无rails,都足以挂成compass的扩展,那点固然没有须要广大代码实现,但照旧很有用的,毕竟用sass和rails的人为主都亟待compass和bootstrap一同干活吗。


2、Compass and Blueprint

 

sass和compass的关系,在好多少人看来类似ruby和rails,compass基于sass,是三个着实意义上的编制程序框架,提供了大批量的mixin(可驾驭为函数库),无论是对css3好多的多浏览器写法的简化协助,照旧促成各类大面积功能的helper,都以无敌而拉长的。别的,包括ScottDavis和Eric 迈尔的中坚团队,也得以说是全歌手组合。

2、bootstrap简介

Blueprint是一套预订义的体制,包罗针对大多数常用的web交互组件的渲染,并且有叁个庞大的格子布局类别(grid
system)。即便不懂设计的技师,也得以选取blueprint的私下认可样式做出极漂亮的页面。

Bootstrap 是最受款待的 HTML、CSS 和 JS
框架,用于支付响应式布局、移动设备优先的 WEB 项目。

美高梅开户网址,Blueprint和Compass,是一个分工很生硬的整合,前者负责样式渲染,前面一个则是基础框架和模块,能够说,在bootstrap诞生在此以前,是web开垦首要推荐的黄金组合。

是依照LESS的一套前端工具库,意图非常令人瞩目,想以多个连串,整合Compass,Blueprint,h5bp的对象效果,成为web前端的一站式解决方案。

3、HTML5 Boilerplate

* 一套完整的底子css模块,但不比compass丰盛和庞大
*
一套预约义样式表,包涵一个格子布局种类,和blueprint提供的基本上,只是计划风格不等同
*
一组依照Jquery的js交互插件,这是Bootstrap真正有力的地点,也是她严刻意义上能够替代Blueprint的因由所在,那几个特别科学的小插件,包含对话框,下拉领航等等,不但功效完善,而且那多少个精制,正在产生广大jquery项目标暗中同意设计规范。

 HTML5
Boilerplate项目(以下简称h5bp)则仿佛名字同样,达成的是三个web页面的专门的事业模板,越发针对html5拓展了宏观优化,同时也对老浏览器向后非常,基本上来讲,h5bp与体制相关的主要部分,是compass的三个子集,但是h5bp并不只限于css,还私下认可引进了好多很好的js开采库,包罗Modernizr和Jquery,再加上三个条件的index.html模板

 

 h5bp是这里涉及的装有框架中选用起来最有利于的,当然受成效限制,她最适用的对象是单页web
app或然静态页面,对于复杂的门类以来,要求和任何框架做补充。

美高梅开户网址 1

 4、Twitter Bootstrap

 

新生而野心十足的Bootstrap跟上述又都不如,她是依附LESS的一套前端工具库,意图特别显然,想以二个项目,整合Compass,Blueprint,h5bp的指标效果,成为web前端的一站式解决方案。

bootStrap之全局CSS样式

  • 一整套整机的基础css模块,但不比compass丰硕和强劲
  • 一套预约义样式表,包涵贰个格子布局种类,和blueprint提供的大半,只是布署风格分裂样
  • 一组依照jquery的js交互插件,那是Bootstrap真正有力的地点,也是她严谨意义上能够代替Blueprint的原故所在,那个非常不易的小插件,包罗对话框,下拉领航等等,不但功用完善,而且极其娇小,正在形成广大jquery项目标私下认可设计标准。

一、概述

专程提一下,Bootstrap使用Normalize.css来张开Reset
CSS,这一体系已经形成了事实规范(当先Compass的Eric meyer
2.0),猛烈推荐使用,其余前面说的h5bp也利用Normalize,因而,借使您在档案的次序中而且接纳了h5bp和Bootstrap,
请注意,尚无要求再引入h5bp的开首样式表style.css

1、移动器械优先

总结: 

着力的 HTML 成分均能够通过 class
设置样式并获得抓实效用;还应该有先进的栅格系统;

说了一大堆,该来点结论了,近日对于web开荒,特别是由技士进行的full
stack开荒,最棒的结缘是:

Bootstrap 是移动设备优先的

SASS+Compass+Bootstrap

通过为视口(viewport)设置 meta
属性为 user-scalable=no 能够禁止使用其缩放(zooming)功效。那样禁止使用缩放功效后,用户只好滚动荧屏,就能够让你的网址看上去更像原生应用的认为到

诸如此类不仅可以够利用SASS强大的编制程序手艺,Compass壮大的平底函数,又有啥不可赢得Bootstrap丰裕的UI组件援助。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

只是,Bootstrap是依靠LESS的,要让她们协同工作,必要三个SASS的Bootstrap移植版本,幸而github上从不缺那类项目,当前最佳的一个是bootstrap-sass 

 

 

2、布局容器


bootStrap为页面内容和栅格系统提供了多个布局容器:container,提供了二种,可是无法相互嵌套:

.container 类用于固定宽度并帮忙响应式布局的器皿

.container-fluid 类用于 百分之百 宽度,占领全体视口(viewport)的容器。

 

3、栅格类

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

 

类的前缀: col-xs-(手提式无线电话机) col-sm(平板) col-md(桌面显示器)
col-lg(大桌面显示屏)

 

美高梅开户网址 2

3.1 水平排列

美高梅开户网址 3

 1 <div class="container" style="color: #ff0000;">
 2     <div class="row">
 3         <div class="col-lg-4">hello 大 </div>
 4         <div class="col-md-4">hello 中 </div>
 5         <div class="col-sm-4">hello 小 </div>
 6         <div class="col-xs-4">hello 超小 </div>
 7     </div>
 8 
 9 
10 <div class="row">
11     <div class="col-md-8">.col-md-8</div>
12     <div class="col-md-4">.col-md-4</div>
13 </div>
14 <div class="row">
15     <div class="col-md-4">.col-md-4</div>
16     <div class="col-md-4">.col-md-4</div>
17     <div class="col-md-4">.col-md-4</div>
18 </div>
19 </div>
20 
21 <div class="container-fluid">
22     <div class="row">
23         <div class="col-lg-4">4</div>
24         <div class="col-lg-8"> 8 </div>
25     </div>

美高梅开户网址 4

 

美高梅开户网址 5

 

3.2 是还是不是不期待在小荧屏设备上装有列都堆积在联合具名?

美高梅开户网址 6

1 <h1>你好,世界!</h1>
2 <div class="container">
3     <div class="row">
4         <div class="col-xs-12 col-sm-6 col-md-8" style="">手机全屏 平板一半 桌面8/12</div>
5         <div class="col-xs-6 col-md-4 " style="">手机一半 桌面4/12</div>
6     </div>
7 </div>

美高梅开户网址 7

 

下图为最小状态:

美高梅开户网址 8

下图为桌面状态:

美高梅开户网址 9

 

 

4、排版

美高梅开户网址 10

 <div >
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>

        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
        <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    </div>

美高梅开户网址 11

 

美高梅开户网址 12

 

通过lead类能够让段落优良展现:

 

美高梅开户网址 13

 1   <div >
 2         You can use the mark tag to <mark>highlight 高亮</mark> text.
 3         <hr/>
 4         <del>被删除 This line of text is meant to be treated as deleted text.</del>
 5         <hr/>
 6         <s>无用This line of text is meant to be treated as no longer accurate.</s>
 7         <hr/>
 8         <ins>额外插入的文本This line of text is meant to be treated as an addition to the document.</ins>
 9         <hr/>
10         <u>带下划线的文本This line of text will render as underlined</u>
11         <hr/>
12         <small>小号文本his line of text is meant to be treated as fine print.</small>
13         <hr/>
14         <strong>强调一段endered as bold text</strong>
15         <hr/>
16         <em> 斜体 rendered as italicized text</em>
17         <hr/>
18         <p class="text-left">Left aligned text.</p>
19         <p class="text-center">Center aligned text.</p>
20         <p class="text-right">Right aligned text.</p>
21         <p class="text-justify">Justified text.</p>
22         <p class="text-nowrap">No wrap text.</p>
23 
24         <hr/>
25         改变大小写
26         <p class="text-capitalize">
27         <p class="text-lowercase">全部小写 Lowercased text.</p>
28         <p class="text-uppercase">全部大写 Uppercased text.</p>
29         <p class="text-capitalize">首字母大写 capitalized text.</p>
30 
31         <hr/>
32         缩略语
33         <abbr title="attribute">attr</abbr>
34         <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
35         <hr/>
36         <address>
37             <strong>Twitter, Inc.</strong><br>
38             795 Folsom Ave, Suite 600<br>
39             San Francisco, CA 94107<br>
40             <abbr title="Phone">P:</abbr> (123) 456-7890
41         </address>
42 
43         <hr/>
44         <address>
45             <strong>Full Name</strong><br>
46             <a href="mailto:#">first.last@example.com</a>
47         </address>
48 
49         <hr/>
50         <blockquote>
51             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
52         </blockquote>
53     </div>

美高梅开户网址 14

 

美高梅开户网址 15

美高梅开户网址 16

 

 引用:

美高梅开户网址 17

 1 <div class="container">
 2     <blockquote>
 3         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 4     </blockquote>
 5 
 6     <blockquote>
 7         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 8         <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 9     </blockquote>
10 
11     <blockquote class="blockquote-reverse">
12         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
13     </blockquote>
14 </div>

美高梅开户网址 18

美高梅开户网址 19

 

美高梅开户网址 20

 1     无序列表
 2     <ul>
 3         <li>hello1</li>
 4         <li>hello2</li>
 5         <li>hello3</li>
 6         <li>hello4</li>
 7         <li>hello5</li>
 8     </ul>
 9 
10     水平列表
11     <ul class="list-inline">
12         <li>hello1</li>
13         <li>hello2</li>
14         <li>hello3</li>
15         <li>hello4</li>
16         <li>hello5</li>
17     </ul>
18 
19     有序列表
20     <ol >
21         <li>hello1</li>
22         <li>hello2</li>
23         <li>hello3</li>
24         <li>hello4</li>
25         <li>hello5</li>
26     </ol>
27 
28     无格式
29     <ol class="list-unstyled">
30         <li>hello1</li>
31         <li>hello2</li>
32         <li>hello3</li>
33         <li>hello4</li>
34         <li>hello5</li>
35     </ol>

美高梅开户网址 21

美高梅开户网址 22

 

 

美高梅开户网址 23

 1     <dl>
 2         <dt>张忠磊</dt>
 3         <dd>世界上最牛逼的人</dd>
 4 
 5         <dt>张忠磊</dt>
 6         <dd>世界上最牛逼的人</dd>
 7 
 8         <dt>张忠磊</dt>
 9         <dd>世界上最牛逼的人</dd>
10 
11         <dt>张忠磊</dt>
12         <dd>世界上最牛逼的人</dd>
13 
14     </dl>
15 
16 
17 
18     <dl class="dl-horizontal">
19         <dt>张忠磊</dt>
20         <dd>世界上最牛逼的人</dd>
21 
22         <dt>张忠磊</dt>
23         <dd>世界上最牛逼的人</dd>
24 
25         <dt>张忠磊</dt>
26         <dd>世界上最牛逼的人</dd>
27 
28         <dt>张忠磊</dt>
29         <dd>世界上最牛逼的人</dd>
30 
31     </dl>

美高梅开户网址 24

美高梅开户网址 25

 

4、代码

美高梅开户网址 26

 1  通过 code 标签包裹内联样式的代码片段
 2     For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 3     <hr/>
 4     通过 kbd 标签标记用户通过键盘输入的内容。=
 5     To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 6     To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 7 
 8     <hr/>
 9     多行代码可以使用 pre 标签。为了正确的展示代码,注意将尖括号做转义处理。
10     <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
11 
12     <hr/>
13     通过 var 标签标记变量
14     <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
15 
16     <hr/>
17     通过 samp 标签来标记程序输出的内容。
18     <samp>This text is meant to be treated as sample output from a computer program.</samp>

美高梅开户网址 27

美高梅开户网址 28

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图