Bootstrap LESS | 菜鸟教程

patterns.less. 这个Less 文件包含了重复的用户界面元素的CSS 代码，不会被位于scaffolding Less 文件中的基本样式覆盖。

菜鸟教程--学的不仅是技术，更是梦想！ 首页 HTML CSS JavaScript Vue Bootstrap NodeJS Python3 Python2 Java C C++ C# Go SQL Linux jQuery 本地书签 首页 HTML CSS JS 本地书签 Search Python3教程 Python2教程 Vue3教程 vue2教程 Bootstrap3教程 Bootstrap4教程 Bootstrap5教程 Bootstrap2教程 Bootstrap教程 Bootstrap教程 Bootstrap简介 Bootstrap环境安装 BootstrapCSS BootstrapCSS概览 Bootstrap网格系统 Bootstrap排版 Bootstrap代码 Bootstrap表格 Bootstrap表单 Bootstrap按钮 Bootstrap图片 Bootstrap辅助类 Bootstrap响应式实用工具 Bootstrap布局组件 Bootstrap字体图标 Bootstrap下拉菜单 Bootstrap按钮组 Bootstrap按钮下拉菜单 Bootstrap输入框组 Bootstrap导航元素 Bootstrap导航栏 Bootstrap面包屑导航 Bootstrap分页 Bootstrap标签 Bootstrap徽章 Bootstrap超大屏幕 Bootstrap页面标题 Bootstrap缩略图 Bootstrap警告 Bootstrap进度条 Bootstrap多媒体对象 Bootstrap列表组 Bootstrap面板 BootstrapWells Bootstrap创建一个网页 Bootstrap插件 Bootstrap插件概览 Bootstrap过渡效果 Bootstrap模态框 Bootstrap下拉菜单 Bootstrap滚动监听 Bootstrap标签页 Bootstrap提示工具 Bootstrap弹出框 Bootstrap警告框 Bootstrap按钮 Bootstrap折叠 Bootstrap轮播 Bootstrap附加导航 Bootstrap其他 BootstrapUI编辑器 Bootstrapv2教程 BootstrapHTML编码规范 BootstrapCSS编码规范 Bootstrap可视化布局 Less教程 Bootstrap警告和错误 Bootstrap模态框 BootstrapLESS 简介 Less是一个CSS预处理器，让CSS具有动态性。

另一方面，Bootstrap是一个快速开发WebApp和站点的工具包。

在本教程中，我们将讨论了有关使用带有LessCSS的Bootstrap知识。

这样，您可以在CSS中使用Bootstrap的Less变量、混合（mixins）和嵌套（nesting）。

查看Less入门教程 获取Bootstrap和LessCSS Bootstrap官网：http://getbootstrap.com/ Less官网：http://lesscss.org/ 包含哪些内容 下载Bootstrap，解压缩文件。

Bootstrap的Less组件位于'lib'目录下。

自Bootstrapv1.4.0版本起，就包含有九个less文件。

下面我们一起来看看这九个文件分别包含什么。

bootstrap.less 这是主要的Less文件。

该文件中导入了一些其他的less文件。

该文件中没有任何代码。

forms.less 这个Less文件包含了表单布局、输入框类型的样式。

mixins.less 这个Less文件让CSS代码可重复使用。

patterns.less 这个Less文件包含了重复的用户界面元素的CSS代码，不会被位于scaffoldingLess文件中的基本样式覆盖。

reset.less 这个Less文件包含了CSS重置。

这是EricMeyer的CSS重置的一个更新。

一些HTML元素比如dfn、samp等的重置被免除。

scaffolding.less 这个Less文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。

tables.less 这个Less文件包含了创建表格的样式。

type.less 这个Less文件下可找到排版相关的样式。

标题、段落、列表、代码等的样式位于这个文件里边。

variables.less 这个Less文件包含了要定制Bootstrap外观和感观的变量。

如何使用 如果要使用它，请在您的HTML页面包含下面代码： 请注意，less-1.1.5.min.js不在js文件夹内，您需要下载并把它放置在指定的文件夹下。

LESS变量和变量值，以及用法指南 超链接 @linkColor #08c 默认的链接颜色 @linkColorHover darken(@linkColor,15%) 默认悬停时的链接颜色 灰度色 @black #000 @grayDarker #222 @grayDark #333 @gray #555 @grayLight #999 @grayLighter #eee @white #fff 强调色 @blue #049cdb @green #46a546 @red #9d261d @yellow #ffc40d @orange #f89406 @pink #c3325f @purple #7a43b6 按钮 @primaryButtonBackground @linkColor 表单 @placeholderText @grayLight 导航栏 @navbarHeight 40px @navbarBackground @grayDarker @navbarBackgroundHighlight @grayDark @navbarText @grayLight @navbarLinkColor @grayLight @navbarLinkColorHover @white 表单状态和通知 @warningText #c09853 @warningBackground #f3edd2 @errorText #b94a48 @errorBackground #f2dede @successText #468847 @successBackground #dff0d8 @infoText #3a87ad @infoBackground #d9edf7 Bootstrap混合 基本的混合 基本的混合从本质上来说，就是包括整个或是部分代码片段。

写法类似一个CSS类，可以随处调用。

.element{ .clearfix(); } 带参数的混合 带参数的混合和基本混合很像，不同之处是前者可以接收参数(根据名称)，参数可以有默认值。

.element{ .border-radius(4px); } 易于定制 基本上Bootstrap所有的混合都保存在mixins.less，这是一个出色的工具类.less文件，我们可以在任何一个.less文件中使用其中的混合。

因此，直接使用已有的混合或是自定义一个新混合皆可。

包含混合 实用工具 混合 参数 用法 .clearfix() 无 清除浮动 .tab-focus() 无 添加类似Webkit获得焦点的风格和类似Firefox的的外包线 .center-block() 无 使用margin:auto把块级元素自动居中 .ie7-inline-block() 无 添加规则的display:inline-block以支持IE7 .size() @height:5px,@width:5px 快速设置行高和行宽 .square() @size:5px 基于.size()设置正方形区域 .opacity() @opacity:100 设置透明度的百分比(比如"50"或"75") 表单 混合 参数 用法 .placeholder() @color:@placeholderText 设置输入框中placeholder的字体颜色 排版 混合 参数 用法 #font>#family>.serif() 无 对某个元素应用一系列serif衬线字体 #font>#family>.sans-serif() 无 对某个元素应用一系列sans-serif字体 #font>#family>.monospace() 无 对某个元素应用一系列monospace字体 #font>.shorthand() @size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight 方便设置字体大小，粗细和行间距 #font>.serif() @size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight 设置衬线字体族serif，字体大小，粗细和行间距 #font>.sans-serif() @size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight 设置sans-serif字体族，字体大小，粗细和行间距 #font>.monospace() @size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight 设置monospace字体族，字体大小，粗细和行间距 栅格系统 混合 参数 用法 .container-fixed() 无 创建一个水平居中的容器，用以容纳内容 #grid>.core() @gridColumnWidth,@gridGutterWidth 使用n列和x像素间距宽度，生成一个象素栅格系统(容器，行，列) #grid>.fluid() @fluidGridColumnWidth,@fluidGridGutterWidth 使用n列和x%间距宽度，生成一个百分比栅格系统 CSS3属性 混合 参数 用法 .border-radius() @radius:5px 元素圆角化，可以是一个单独的值，也可以分别是四个角的值 .box-shadow() @shadow:01px3pxrgba(0,0,0,.25) 对元素应用阴影 .transition() @transition 添加CSS3过渡效果(比如，all.2slinear) .rotate() @degrees 旋转一个元素n度 .scale() @ratio 对一个元素缩放原有大小的n倍 .translate() @x:0,@y:0 在平面上移动x和y个像素 .background-clip() @clip 裁剪一个元素的背景(用于border-radius) .background-size() @size 通过CSS3更改背景图片的大小 .box-sizing() @boxmodel 改变一个元素的盒(box)模型(比如，用在100%宽度input上的border-box) .user-select() @select 更改页面文本的选择光标 .resizable() @direction:both 改变右下角坐标以重置元素大小 .content-columns() @columnCount,@columnGap:@gridColumnGutter 让元素中的内容使用CSS3的列 背景和渐变 混合 参数 用法 #translucent>.background() @color:@white,@alpha:1 设置一个元素的背景色和透明度 #translucent>.border() @color:@white,@alpha:1 设置一个元素的边框的颜色和透明度 #gradient>.vertical() @startColor,@endColor 创建一个跨浏览器的垂直背景渐变 #gradient>.horizontal() @startColor,@endColor 创建一个跨浏览器的水平背景渐变 #gradient>.directional() @startColor,@endColor,@deg 创建一个跨浏览器的有斜度的背景渐变 #gradient>.vertical-three-colors() @startColor,@midColor,@colorStop,@endColor 创建一个跨浏览器的三色背景渐变 #gradient>.radial() @innerColor,@outerColor 创建一个跨浏览器的放射背景渐变 #gradient>.striped() @color,@angle 创建一个跨浏览器的条纹背景渐变 #gradientBar() @primaryColor,@secondaryColor 用于给按钮指定渐变背景和浅暗的边框 如何编译 带有makefile的Node.js 运行下列命令，利用npm在全局环境下安装LESS命令行编译器和uglify-js： $npminstall-glessuglify-js 安装成功后，在您的Bootstrap的根目录下运行make即可编译CSS。

此外，如果您已经安装了watchr，您可以运行makewatch，这样您每次修改Bootstrap后，就会自动重编译Bootstrap。

（不是必须运行，这样做仅仅是出于方便。

） 使用JavaScript 只需要简单的引用less.js文件(下载最新的Less.js)并重新加载页面。

js文件就会编译less。

命令行 如果您已经安装了Less命令行（CommandLine），原型下面要编译的命令： $lessc./lib/bootstrap.less>bootstrap.css 如果您想要一个压缩的编译，可以使用--compress命令。

LessMacapp 虽然是非官方的，但是这里有一个可用的LessMac应用程序可用于编译。

点击这里，下载本教程中使用到的所有HTML、CSS、JS和图片文件。

Bootstrap警告和错误 Bootstrap模态框 点我分享笔记 取消 分享笔记 昵称昵称(必填) 邮箱邮箱(必填) 引用地址引用地址 分类导航 HTML/CSSHTML教程HTML5教程CSS教程CSS3教程Bootstrap3教程Bootstrap4教程Bootstrap5教程FontAwesome教程Foundation教程JavaScriptJavaScript教程HTMLDOM教程jQuery教程AngularJS教程AngularJS2教程Vue.js教程Vue3教程React教程TypeScript教程jQueryUI教程jQueryEasyUI教程Node.js教程AJAX教程JSON教程Echarts教程Highcharts教程Google地图教程服务端Python教程Python2.x教程Linux教程Docker教程Ruby教程Java教程C教程C++教程Perl教程Servlet教程JSP教程Lua教程Rust教程Scala教程Go教程PHP教程Django教程Zookeeper教程设计模式正则表达式Maven教程Verilog教程ASP教程AppML教程VBScript教程数据库SQL教程MySQL教程PostgreSQL教程SQLite教程MongoDB教程Redis教程Memcached教程数据分析Python教程NumPy教程Pandas教程Matplotlib教程Scipy教程R教程Julia教程移动端Android教程Swift教程jQueryMobile教程ionic教程Kotlin教程XML教程XML教程DTD教程XMLDOM教程XSLT教程XPath教程XQuery教程XLink教程XPointer教程XMLSchema教程XSL-FO教程SVG教程ASP.NETASP.NET教程C#教程WebPages教程Razor教程MVC教程WebForms教程WebServiceWebService教程WSDL教程SOAP教程RSS教程RDF教程开发工具Eclipse教程Git教程Svn教程Markdown教程网站建设HTTP教程网站建设指南浏览器信息网站主机教程TCP/IP教程W3C教程网站品质 Advertisement 反馈/建议 在线实例 ·HTML实例 ·CSS实例 ·JavaScript实例 ·Ajax实例 ·jQuery实例 ·XML实例 ·Java实例 字符集&工具 ·HTML字符集设置 ·HTMLASCII字符集 ·JS混淆/加密 ·PNG/JPEG图片压缩 ·HTML拾色器 ·JSON格式化工具 ·随机数生成器 最新更新 · JavaScript判断... · 如何判断JavaSc... · JavaScriptNumb... · JavaScriptNumb... · JavaScriptNumb... · JavaScriptNumb... · jQuery判断元素... 站点信息 · 意见反馈 · 免责声明 · 关于我们 · 文章归档 关注微信 Copyright©2013-2022菜鸟教程  runoob.comAllRightsReserved.备案号：闽ICP备15012807号-1 微信关注