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-*-*)

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

时间: 2024-11-01 16:01:43

Bootstrap 各 Less 文件简要说明的相关文章

bootstrap源文件&库文件&中文文档离线网页版&网站例子[程序吧 www.qhttl.com]

最近想起了做网站前台,现在流行的是响应式设计,无奈自己不会,网上照了照,居然发现了bootstrap,分享出来 内部包含有bootstrap源文件&库文件&中文文档离线网页版&网站例子网页版,下载无密码 下载地址:http://www.qhttl.com/detail/v-38593-bootstrapyuanwenjiankuwenjianzhongwenwendanglixian.html

Bootstrap里的文件分别代表什么意思及其引用方法

关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下: bootstrap/ <!--主目录--> ├── css/ <!--CSS样式文件--> │ ├── bootstrap.css <!--Bootstrap核心CSS文件--> │ ├── bootstrap.css.map <!--source map文件--> │ ├── bootstrap.min.css <!--Bootstr

core_cm4相关头文件简要说明

core_cm4.h:内核功能的定义,比如NVIC相关寄存器的结构体和Systick配置: core_cm4_simd.h:包含与编译器相关的处理: core_cmFunc.h:内核核心功能接口头文件: core_cmInstr.h:包含一些内核核心专用指令. core_cm4相关头文件简要说明

bootstrap 三个文件的引入

<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/

在jsp页面中导入BootStrap中的文件

BootStrap应该放在项目的根目录下面 然后因为我的jsp页面跟html页面是写在HTML文件夹中,所以我路径的导入应该像下面的图一样,退回到上级目录再写路径.

Bootstrap的字体文件woff2 报错

在iis上看到网站有个404,于是强迫症来了... 百度了许久,知道了解决办法,记下来,是网站默认没有支持这种字体 在 Web.config 的 system.webServer 节点中添加: 带标签尖括号的代码好像上传不上去,就截图了 .

简要介绍Bootstrap,以及如何下载、使用

下载Bootstrap Bootstrap提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景.继续阅读下面的内容,看看哪种方式适合你的需求吧. 编译后的CSS.JS和字体文件 获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS.JavaScript文件,另外还包含字体文件.但是不包含文档和源码文件. 额外的下载渠道 下载源码 从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码. Clone or fork

Bootstrap速学教程之简要介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,不用请UI设计师也能开发出中规中矩的网页,并且最重要的是支持html5.css3移动端自适应,现在很多所谓的三合一五合一网站是基于bootstrap搭建的. 我们来看一个简单的例子 <!DOCTYPE html><!-- html5格式 --> <html lang="zh-CN"

关于H5框架之Bootstrap的小知识

浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> &l