bootstrap中less学习
我的图书馆
bootstrap中less学习
变量变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。& // LESS /* 生成的 CSS */@color: #4D926F; #header {#header { &color: #4D926F;& color: @ &}} h2 {h2 { color: #4D926F;& color: @ }}混合混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。// LESS.rounded-corners (@radius: 5px) {& border-radius: @& -webkit-border-radius: @& -moz-border-radius: @}#header {& .rounded-}#footer {& .rounded-corners(10px);}/* 生成的 CSS */#header {& border-radius: 5& -webkit-border-radius: 5& -moz-border-radius: 5}#footer {& border-radius: 10& -webkit-border-radius: 10& -moz-border-radius: 10}嵌套规则我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。// LESS#header {& h1 {& & font-size: 26& & font-weight:& }& p { font-size: 12& & a { text-decoration:& & & &:hover { border-width: 1px }& & }& }}/* 生成的 CSS */#header h1 {& font-size: 26& font-weight:}#header p {& font-size: 12}#header p a {& text-decoration:}#header p a:hover {& border-width: 1}函数 & 运算运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。// LESS@the-border: 1@base-color: #111;@red: & & & 󍧢#header {& color: @base-color * 3;& border-left: @the-& border-right: @the-border * 2;}#footer {&& color: @base-color + #003300;& border-color: desaturate(@red, 10%);}/* 生成的 CSS */#header {& color: #333;& border-left: 1& border-right: 2}#footer {&& color: #114411;& border-color: #7d2717;}在客户端使用引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:然后点击页面顶部download按钮下载 less.js, 在 中引入:注意你的less样式文件一定要在引入less.js前先引入。备注：请在服务器环境下使用！本地直接打开可能会报错！less官网：http://www.lesscss.net/features/有过其他编程经验的开发者学起来应该不难，花点时间都可以熟练掌握。Less 是一个CSS 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables)，混合(mixins)，函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。现在就得编译这些less文件了，在线编译的网站很多，但是没有本地编译赞。同样本地编译的软件很多，这里以kola为例。官方下载地址：/index-zh.html编辑less文件后，使用koala编译bootstrap文件，koala运行界面如下：&koala的用法 &中文&/oklai/koala/wiki/开始使用Koalahttp://code.csdn.net/news/2819548编译后的文件，这就是我们最终要的文件了。引入项目开发即可。&&
TA的最新馆藏[转]&[转]&[转]&
喜欢该文的人也喜欢用户名：小凤凰
文章数：22
访问量：1712
注册日期：
阅读量：1297
阅读量：3317
阅读量：448061
阅读量：1133053
[匿名]51cto游客：
[匿名]51cto游客：
[匿名]51cto游客：
[匿名]51cto游客：
51CTO推荐博文
&&2011年，twitter的&一小撮&工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--。Bootstrap由和所设计和建立，在上开源之后，迅速成为该站上最多人&的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。
&&GitHub上介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Bootstrap的基础布局--Scaffolding.
& & & Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive &Design)这六五个方面深入讲解Boostrap的scaffolding.
&全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:
&!DOCTYPE html&
&html lang=&en&&
... &/html&
同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。
&格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。默认格网系统直观概念如图1-1所示：& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 图1-1 默认格网系统(Default Grid System) & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div.
&div class=&row&&
&div class=&span4&&...&/div&
&div class=&span8&&...&/div&
2.2& 偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 图1-２ 偏移列(Offset columns)
以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.
&div class=&row&&
&div class=&span4&&...&/div&
&div class=&span4 offset4&&...&/div&
2.3&嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row&和相应的长度的span*&div即可。 & & & 如图1-3所示：
&& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &图1-3 & &&嵌套列(Nesting columns)&
以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.
&div class=&row&&
&div class=&span12&&
Level 1 of column
&div class=&row&&
&div class=&span6&&Level 2&/div&
&div class=&span6&&Level 2&/div&
嵌套的div长度之和不能大于它的父div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。
流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row&改成.row-fluid&，就可以将fixed行改为fluid.如图1-4所示： & & & & & & & & & & & & & & & & & & & & & & & & & && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &图1-4 流式格网系统(Fluid grid system) & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &以下代码实现了是实现图1-4中，两个不同长度的流式页面要素.
&div class=&row-fluid&&
&div class=&span4&&...&/div&
&div class=&span8&&...&/div&
嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。
自定义格网(Grid customization).Bootstrap允许通过修改variables.less的参数值来自定义格网系统。主要包括如表1-1所示的变量：
@gridColumns
@gridColumnWidth
每列的宽度
@gridGutterWidth
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 表1-1 格网变量 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 我们通过修改以上值，并重新编译Bootstrap来实现自定义格网系统。如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less来获得多设备兼容.
布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为Fixed布局，右边为Fluid布局： & & & & & & & & & & & & && & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 图1-5 布局(Layout) & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 固定布局代码如下：
&div class=&container&&
流式布局代码如下：
&div class=&container-fluid&&
&div class=&row-fluid&&
&div class=&span2&&
&!--Sidebar content--&
&div class=&span10&&
&!--Body content--&
如果对Bootstrap提供的布局不够满意，可以参见ess Frame Work 提供的模板。
最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。
了这篇文章
类别：未分类┆阅读(0)┆评论(0)bootstrap中@baseFontFamily是什么意思。。 应该说在CSS中@是什么意思？？新手。。。。-Bootstrap 怎么引用base.html _新知资讯资讯
bootstrap中@baseFontFamily是什么意思。。 应该说在CSS中@是什么意思？？新手。。。。
bootstrap中@baseFontFamily是什么意思。。 应该说在CSS中@是什么意思？？新手。。。。
如，假设其值为;*h1引用了这个变量*/实际上最终把上面代码还原成，而是@在bootstrap环境中是变量：font-size:red。不能说@在css中是变量的意思，但是不是以@这种形式不一定@是变量的意思。相当于我定义了一个基础变量：baseFontFamily，这依赖于在服务器或客户端通过bootstrap的相关方法去把这种写法的css解析还原成一个正常的css，css目前没有变量这个概念;}后去输出给浏览器未来css4会支持类似的变量。然后在需要这种字体的地方全部去引用这个变量;color：h1{font-size:14px：h1{@baseFontFamily}&#47:14color:即一个14像素的字号和文本颜色为红色
&%@include file=&...path.../B.jsp& %&在A中引入就可以了
刚遇到这个问题,没找到好办法。不过用了笨笨的方法实现了。 默认隐藏: &div id=&alert-...
直接上代码: HTML代码: &li class=&dropdown&& &a href=&#& c...
用javascript才能实现, 可以使用angularjs方便点
方法一: 首先你得把boostrap下下来; &link type=&text/css& rel=&...
就是在case1里面又添加了一层switch分支。比如switch(a){case1:switch(...
大多数人只用bootstrap的样式来布局, 只需选择定义好的样式的类名复制进去就能写出一个外观不错...
BOOTSTRAP JQUERY响应式导航菜单插件代码
13:22:45 By...
方法一: 　　不建议使用 * {}选择器,因为在一些其他样式插件、特殊部分会有更好的字体样式设定,用...
你可能感兴趣的相关内容您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
bootstrap用户手册：设计响应式网站.pdf 140页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：200 &&
你可能关注的文档：
··········
··········
1 2 3------------------------------图灵程序设计丛书
Bootstrap用户手册
[美]　Jake Spurlock
Beijing o Cambridge o Farnham o K?ln o Sebastopol o Tokyo
O’Reilly Media, Inc.授权人民邮电出版社出版
人 民 邮 电 出 版 社
4------------------------------
Bootstrap 是Mark Otto 和Jacob Thornton 在Twitter 公司共同开发的一个网站开发框架， 2011 年8 月发布至今已经成为Github 上最受关注的开源项目。从最初CSS 驱动的项目到目前 内置很多JavaScript 插件和图标，并且涵盖表单和按钮元素、支持响应式Web 设计，Bootstrap 为Web 开发提供了前瞻性的设计和开发基础，能够大幅提升开发效率，已被很多流行网站采用。 本书全面介绍了Bootstrap 为前端开发提供的所有工具，包括网格布局系统、预定义CSS 样式、 内置界面组件和交互式JavaScript 插件。
本书内容系统、结构完整、讲解简明、方便实用，是前端开发人员使用Bootstrap 的最佳参 考书，适合所有前端开发人员和希望了解Bootstrap 的读者阅读参考。
◆ 著　　　　[美] Jake Spurlock
译　　　　李松峰
责任编辑　刘美英
责任印制　焦志炜
◆ 人民邮电出版社出版发行　　北京市崇文区夕照寺街14号
邮编　100061　　电子邮件　315@
北京　　　　　　印刷
◆ 开本：880×
印张：4.375
字数：118千字
2013年 9 月第 1 版
2013年 9 月北京第 1次印刷
著作权合同登记号 图字：01-号
定价：35.00元
读者服务热线： 010 4　印装质量热线： 010
反盗版热线： 010
广告经营许可证：京崇工商广字第 0021 号
5------------------------------
版权声明 (C)2013 by Jake Spurlock.
’ Simplified Chinese Edition,jointly published by O Reilly Media,Inc.and Posts &
’ Telecom Press, 2013 Authorized translation of the English edition
正在加载中，请稍后...