Bootstrap 各 Less 文件简要说明

 Bootstrap的LESS文件夹下存储着Bootstrap LESS和Minxin源码。乍看比较繁复,若要在使用中信手拈来,必要过一遍LESS源码,熟悉框架结构对提高LESS也是有益的。先简单标记一下“less/bootstrap.less”中引用的LESS文件。

 

 1 /*!
 2  * Bootstrap v3.3.7 (http://getbootstrap.com)
 3  * Copyright 2011-2016 Twitter, Inc.
 4  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 5  */
 6 
 7 // Core variables and mixins 
 8 // 引入变量和mixin函数
 9 @import "variables.less";       //Bootstrap变量
10 @import "mixins.less";          //引入Bootstrap mixin工具函数
11 
12 // Reset and dependencies   
13 // 重置元素样式和依赖关系
14 @import "normalize.less";       //重置元素样式,统一浏览器显示
15 @import "print.less";           //设置打印样式
16 @import "glyphicons.less";      //icon图标
17 
18 // Core CSS
19 // CSS全局样式
20 @import "scaffolding.less";     //重置元素样式,统一/增添Bootstrap样式。(盒模型宽度、字体大小、a鼠标样式、图片、sr-only和button)
21 @import "type.less";            //排版
22 @import "code.less";            //代码
23 @import "grid.less";            //定义栅格系统样式 (.container,.row和各.col-*-*)
24 @import "tables.less";          //表格   
25 @import "forms.less";           //表单
26 @import "buttons.less";         //定义按钮基本样式
27 
28 // Components
29 // 组件
30 @import "component-animations.less";
31 @import "dropdowns.less";               //下拉按钮
32 @import "button-groups.less";           //按钮组
33 @import "input-groups.less";            //表单元素样式
34 @import "navs.less";                    //导航样式
35 @import "navbar.less";                  //导航条样式
36 @import "breadcrumbs.less";             //眉毛链接
37 @import "pagination.less";              //分页导航
38 @import "pager.less";                   //翻页   (上一页、下一页 .pager,.next,.previous,.disabled)
39 @import "labels.less";                  //标签
40 @import "badges.less";                  //徽章
41 @import "jumbotron.less";               //巨幕
42 @import "thumbnails.less";              //缩略图
43 @import "alerts.less";                  //警告框
44 @import "progress-bars.less";           //进度条
45 @import "media.less";                   //媒体对象
46 @import "list-group.less";              //列表组
47 @import "panels.less";                  //面板
48 @import "responsive-embed.less";        //具有响应式特性的嵌入内容
49 @import "wells.less";                   //把 Well 用在元素上,就能有嵌入(inset)的简单效果。
50 @import "close.less";
51 
52 // Components w/ JavaScript
53 // JS插件
54 @import "modals.less";                  //对话框样式
55 @import "tooltip.less";                 //工具提示
56 @import "popovers.less";                //弹出框
57 @import "carousel.less";                //轮播
58 
59 // Utility classes
60 // 实用工具类
61 @import "utilities.less";               //设置浮动,显示/隐藏,固定定位
62 @import "responsive-utilities.less";    //设置栅格系统中各列显示/隐藏,打印样式(col-*-*)

 

Bootstrap 各 Less 文件简要说明

原文地址:https://www.cnblogs.com/imother/p/8395145.html

为您推荐