Bootstrap入门(三):Less

很多时候我们需要定制Bootstrap的样式,然后根制入门初步中,每次都定制网页(http://v3.bootcss.com/customize/)生成我们需要的Css是一件很麻烦又不方便的事件。幸好Bootstrap源中包含了Less文件,能让我方便的修改与定制:

Less:一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更容易维护、方便制作主题、扩充。使用Less文件,我们只需要修改文件中的变量值,再通过插件就能自动生成对应的Css文件了。

把Less文件夹拷贝到项目文件夹(TouchingVip.Blog)下:

基本的项目已经出来,现在单靠记事本已经不能很难编码,我们得使用一个编辑工具去组织管理好这些文件,而且提高我们的编码效率。Visual Studio Code,微软出的跨平台IDE开发编辑工具(https://code.visualstudio.com/ ),下载安装。

打开项目文件夹 TouchingVip.Blog

回到之前自动生成Css的话题,如下图搜索 Easy Less 插件并安装,重新载入生效

这时候,我们还得配的东西。如果不,它自动生成的CSS会在Less目录(与所编辑的less文件位于同一目录)

如何配置插件详情里有说明:

打开 settings.json 文件,写入并保存以下配置。这是配置在项目下的Css 文件夹中

配置好。现在可以修改Less 中定义的样式了。比如要修改导航菜单的颜色,主要是以下样式:

.navbar-inverse

全局搜索该样式:输入.navbar-inverse 回车

因为样式是Less生成的,所以要我们需要的是 .less 文件。这里我们改的是navbar.less 文件。因为我们页面引用的时bootstrap.css 而对应的bootstrap.less 里引用了该文件。所以最终我们改完对应的less文件,还要随便改一下bootstrap.less 比如说输入个空格,保存触发插件生成.css 文件

我们把它的值改成红色:#ff0000

保存文件

打开bootstrap.less 文件,输入空格再保存

刷新页面

时间: 2024-11-10 18:10:34

Bootstrap入门(三):Less的相关文章

Bootstrap入门三:页面排版

在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本.强调文本.标题.Code风格.按钮.表单.表格等格式,并运用CSS3的@font-face和伪元素一起实现了一套icon主题. 1.标题: HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. <h1>h1. Bootstrap heading</h1> <h2>h2.

BootStrap入门教程 (三)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

Bootstrap入门(五)表单

先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet"> 一.内联表单 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 而内联表单,要为 <form> 元素添加 .form-inli

BootStrap入门教程 (一)

BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多

BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素

BootStrap入门教程 (四)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

Netty4入门三:Netty概要讲解,全面了解Netty,做到胸有成竹

     读完这一章,我们基本上可以了解到Netty所有重要的组件,对Netty有一个全面的认识,这对下一步深入学习Netty是十分重要的,而学完这一章,我们其实已经可以用Netty解决一些常规的问题了. 一.先纵览一下Netty,看看Netty都有哪些组件? 为了更好的理解和进一步深入Netty,我们先总体认识一下Netty用到的组件及它们在整个Netty架构中是怎么协调工作的.Netty应用中必不可少的组件: Bootstrap or ServerBootstrap EventLoop Ev

BootStrap入门教程 (二)

上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffolding)之上,Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素,旨在为用户提供新鲜.一致的页面外观和感觉.本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容. 排版 (Typography),

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls