bootstrap 3.0 LESS源代码浅析(二)

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:88 发布时间:2019-06-28
摘要:忘记在哪里的一道题目  请用CSS实现如上图一样的椭圆,有兴趣的同学可以思考一下。    回到Bootstrap 3.0 OK,我们回到Bootstrap,mixins.less中关于borderradius的函数只有下面四个: // Singl

忘记在哪里的一道题目 

皇牌天下投注网 1

请用CSS实现如上图一样的椭圆,有兴趣的同学可以思考一下。 

 

回到Bootstrap 3.0

OK,我们回到Bootstrap,mixins.less中关于border radius的函数只有下面四个:

// Single side border-radius  .border-top-radius(@radius) {    border-top-right-radius: @radius;     border-top-left-radius: @radius;  }  .border-right-radius(@radius) {    border-bottom-right-radius: @radius;       border-top-right-radius: @radius;  }  .border-bottom-radius(@radius) {    border-bottom-right-radius: @radius;     border-bottom-left-radius: @radius;  }  .border-left-radius(@radius) {    border-bottom-left-radius: @radius;       border-top-left-radius: @radius;  }

可见Bootstrap提供了单边的圆角的快捷方法。我们发现Bootstrap 3.0中border-radius相关属性并没有使用任何prefix。

实际上目前,现代浏览器上已经完全支持该属性,具体支持程度看见:

http://caniuse.com/border-radius

 

最昂贵的CSS属性

根据kangax的文章,对于border-radius,当页面滚动或者重绘时,其计算成本最高的CSS属性,比其他属性产生更多的计算时间。

 皇牌天下投注网 2

所以注意减少单页面过多使用该属性的元素,避免页面产生顿卡现象。

 


组件文件

这里有Bootstrap的21个组件文件;前一章所涵盖的每个组件都有自己的文件。与组件相关的所有CSS定义都可以在其对应的less文件中找到。
■ component-animations.less
■ glyphicons.less
■ dropdowns.less
■ button-groups.less
■ input-groups.less
■ navs.less
■ navbar.less
■ breadcrumbs.less
■ pagination.less
■ pager.less
■ labels.less
■ badges.less
■ jumbotron.less
■ thumbnails.less
■ alerts.less
■ progress-bars.less
■ media.less
■ list-group.less
■ panels.less
■ wells.less
■ close.less

这个列表中还有一个文件,实际上它本身不是一个组件,close.less。它包含了将用于模式按钮的CSS规则,警报,以及关闭此特定组件的其他元素。

border-top-left-radius:2em;  border-top-right-radius:2em;  border-bottom-right-radius:2em;  border-bottom-left-radius:2em;

实用程序文件

最后,我们在Bootstrap中有两个实用程序文件
■ utilities.less
■ responsive-utilities.less

这些文件定义了帮助我们更好地组织Bootstrap组件的类。它们帮助其他类,比如.clearfix从它周围的所有元素中清除一个组件。.hide和 .show用来切换组件可见性。例如,responsive-utilities.less包含visible-lg .hidden-sm这样的可见性实用工具。

border-radius是最常见的CSS3属性,但你知道他多少东西呢?

媒体查询(Media Queries)和Bootstrap


媒体查询被作为CSS3的一部分引入,用来根据屏幕分辨率动态控制网站内容。它是今天可用的每一个响应框架下的关键技术之一。Bootstrap使用媒体查询来正确定义许多CSS规则,使之成为响应框架。

如果想自定义Bootstrap的响应网格系统,理解媒体查询是很重要的。让我们来看一个简单的媒体查询:

@media all and (min-width: 699px){
h1{
display: none;
}
}

每个媒体查询都应该有一个媒体类型和一个表达式。媒体类型指定链接文档将显示在什么类型的设备上。在这里,媒体类型是全部。该表达式使用媒体特性进一步限制样式表的范围,如宽度、高度和颜色。在这里,表达式的最小宽度是:699px。如果浏览器宽度大于699px,这个媒体查询将应用它所包含的CSS属性。因此,在大于699px的屏幕上h1元素将被隐藏。

有许多媒体类型和媒体功能可供我们使用。媒体类型的例子包括all(所有的)、print(打印的)、screen(屏幕的)和projection(投影的)。媒体特征的例子包括height(高度),max-height(最大高度),和max-width(最大宽度)。

Bootstrap已经为各种设备大小定义了许多媒体查询,以创建一个高度响应的框架。这里是Bootstrap的CSS文件中的一个片段:

@media (min-width: 768px) {
.container {
width: 750px;
}
}

皇牌天下投注网,要了解更多关于媒体查询的信息,请参考《Mozilla Developer Network documentation》链接是https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

 

编译Less


编译Less是相对简单的。在这里,我将向你们展示一些标准的方法。

border-radius:2em;

复位文件

这里有两个复位文件去清除浏览器的默认值:

  1. normalize.less清除了许多浏览器默认设置如字体,字体大小,填充和边距,标题标签设置,表单元素的样式,等等。

2、print.less包含打印支持媒体查询。

比如:

使用Node

如果你已经安装了Node,你可以用Node的包管理工具(npm)来安装less编译器.

一旦less编译器安装完毕,使用下面的命令去把bootstrap.less编译成bootstrap.css.你需要在命令行工具中切换到/less目录,然后输入命令:
$ lessc bootstrap.less > bootstrap.css

实际上,其首先都是水平方向(top or bottom)的弧度,然后才是垂直方向的弧度(left or right)。

在下载前自定义Bootstrap


是的,你没有听错,Bootstrap允许你编辑和旋转这些你希望出现在你自己的自定义Bootstrap包中的功能。

这是每一个Less变量边上都有一个字段,所以如果你不知道如何去使用Less,你可以使用这个表单去编辑默认值。每一个Bootstrap组件和插件也都有一个多选框。如图5.5所示,你可以不选择你不需要使用的。

皇牌天下投注网 3

图5.5

不选择特定的组件可能也会关联取消选择有依赖关系的组件。例如,在自定义页面上不选择Forms(表单)也将自动不选择Input groups(输入组件)和Navbar(导航条)。因此,选择时要小心。
【注:Bootstrap 3.3版本的自定义页面的链接是http://getbootstrap.com/docs/3.3/customize/

相当于什么?

第5章 深入了解:自定义Bootstrap


想象一下,一个网站,所有的网站都是用Bootstrap构建的,看起来和感觉都一样。无聊,对吧?幸运的是,我们有能力改变我们使用的任何框架的默认样式。

许多Bootstrap的组件和插件都有自己的默认样式。为了给他们一个特别的体验,你需要替换他们的CSS规则并定义你的自己的。

在第一章,我和大家分享了一些建立在Bootstrap上的流行网站。它们都有自定义的Bootstrap的CSS,以使它们的模板看起来独一无二且美观。

在本章中,我们将讨论可以完全自定义Bootstrap默认样式的各种方法,并分析哪种方法更可取,为什么。最后,我们将尝试理解Bootstrap的CSS是如何编写的,使它成为一个高度响应的框架。

使用第三方软件

这里有一些可视化的第三方软件用于编写和编译Less代码。比较流行的有Crunch!, SimpLESS,Mixture。【注:在window下可以使用WinLess】

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:bootstrap 3.0 LESS源代码浅析(二)

关键词:

最火资讯