BOOTSTRAP定制
1.补充:栅格系统中调整列的位置/顺序
(1)方法1:偏移量(col-*-offset-*)
(2)方法2:对列进行push/pull操作
col-lg-pull-1 ~ col-lg-pull-12
col-lg-push-1 ~ col-lg-push-12
col-md-pull-1 ~ col-md-pull-12
col-md-push-1 ~ col-md-push-12
col-sm-pull-1 ~ col-sm-pull-12
col-sm-push-1 ~ col-sm-push-12
col-xs-pull-1 ~ col-xs-pull-12
col-xs-push-1 ~ col-xs-push-12
提示:使用推拉操作对列修改列的顺序,可以对当前大小的屏幕以及更大的屏幕有效。
2.Bootstrap定制
定制方法:
(1)覆盖Bootstrap提供的默认样式:编写自己的CSS样式文件,放在bootstrap.css后面。问题:样式覆盖、影响渲染速度、覆盖不容易实现
(2)直接修改bootstrap.css文件。问题:修改效率太低
(3)直接修改bootstrap.css的源代码——bootstrap.less——推荐方式
3.动态样式语言
浏览器默认只能识别CSS这一门样式语言!
但CSS作为一门语言并不称职——没有变量、循环选择、函数...等最基本的特征都不具备——CSS称为“静态样式语言”。
动态样式语言:为CSS添加变量、循环选择、函数...等高级特性!注意:所有的动态样式语言语法默认都不被浏览器支持,必须转换/编译为CSS静态样式语言。
常见的动态样式语言:
(1)Sass / SCSS:最早期的样式语言 .sass/.scss
(2)Stylus:功能强大,语法与CSS相差较大 .styl
(3)LESS:较新,语法与CSS最接近 .less
4.LESS动态样式语言的使用方法
(1)客户端使用LESS——效率低——了解
让客户端下载less源文件,以及一个less语法转换程序——less.js
<link rel="stylesheet/less" href="css/2.less"/>
<script src="js/less.min.js"></script>
(2)服务器端使用LESS——效率高——掌握!
程序员在开发时编写.less源文件,并在自己的电脑上安装一款less语言转换程序,把.less=>.css;在HTML中直接使用.css即可。步骤:
1)安装node——服务器端JS解释器——保证命令行中可以运行node.exe
2)下载lessc编译程序——一个运行在服务器端的JS程序
3)//使用node运行lessc文件
把lessc转换程序配置为WebStorm中的一个FileWatcher,只要用户编写了一个.less文件,ws会自动的调用less转换程序,编译出.css文件。
5.LESS动态样式语言语法
(1)less文件支持所有的css语法
(2)less文件可以编写单行/多行注释,只有多行注释会出现在css文件中
(3)声明变量,实现“一改百改”,格式:
@变量名: 值;
(4)混入/混合(mixin)
.class1 { }
.class2 {
xx: yy;
.class1; //在一个样式中引用另一个样式
}
(5)带参混入/混合
.class1(@var1, @var2) { color: @var1; ... }
.class2 {
.class1(#aaa, 4px);
}
(6)样式的嵌套
.class1 {
xx: yy;
.class2 {
aa: bb;
}
}
.class1: { xx: yy; }
.class1 .class { aa: bb; }
(7)可以执行数学运算
(8)LESS语言预定义了若干函数
image-width('url')
image-height('url')
rgba() //构建一个rgb颜色值
hsl() //构建一个色相/饱和度/亮度颜色值
darken(@color, 百分比) 将指定的颜色变暗指定的百分比
lighten(@color, 百分比) 将指定的颜色变亮指定的百分比
作业:
(1)完成Intel首页的布局!!
(2)看Bootstrap的LESS源代码,熟悉文件和目录结构。
爱卡(深圳)管理有限公司
分享每一刻精彩
微信:iCafeYOJOY
微博:http://weibo.com/iCafeYOJOY
官网:www.icafe.im
BOOTSTRAP定制的更多相关文章
- Bootstrap定制开发
Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...
- 记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引 在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...
- 手摸手教你bootstrap定制
老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内 ...
- Bootstrap定制(二)less基础语法
前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...
- Bootstrap定制(一)less入门及编译
第一篇博,希望支持. 近期在开发一个项目,项目前端定位于bootstrap,遂花了少许时间研究了bootstrap,将其整理整理,与众人共享. bootstrap官方的定制,功能还算完善,但是基于we ...
- Bootstrap Metronic 学习记录(一)简介
1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...
- 推荐15款最好的 Twitter Bootstrap 开发工具
Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...
- 权限设计实现(MVC4+Bootstrap+ PetaPoco+Spring.Net)
权限设计实现(MVC4+Bootstrap+ PetaPoco+Spring.Net) 一.前言 至毕业后一直在做企业Web开发,做过的项目也有不少,每个项目的框架设计都不是一样,但是每个项目的权限模 ...
- Bootstrap相关优质项目推荐
Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册 根据最新的 jQuery 1.1 ...
随机推荐
- 贪吃蛇游戏C语言源代码学习
源代码下载地址为:www.clang.cc 阅读学习了源代码,并做了简单的注释和修改,里面只用了链表数据结构,非常适合C语言入门者学习阅读. 程序可在VS2013下编译运行. #include< ...
- WCF 编程实验室
最近由于项目需要,简单研究了一下.NET WCF编程. 首先,简单说下WCF是什么,WCF 本质上,是一种开发框架.它用来开发类似COM+ .WEB SERVICE 这样“远程方法调用” 功能. 普通 ...
- python基础知识9——模块2——常见内置模块
内置模块 内置模块是Python自带的功能,在使用内置模块相应的功能时,需要[先导入]再[使用] 1.sys 用于提供对Python解释器相关的操作: sys.argv 命令行参数List,第一个元素 ...
- 转:python list排序的两种方法及实例讲解
对List进行排序,Python提供了两个方法 方法1.用List的内建函数list.sort进行排序 list.sort(func=None, key=None, reverse=False) Py ...
- ANdroid5.0不能隐式启动service,必须显示,解决办法,加服务端包名
Intent intent = new Intent(); intent.setAction("com.viaembedded.veonvif.RemoteService");// ...
- 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介
引言 今天看到一片热门的博客, .NET高级工程师面试题之SQL篇 ,要求找出每一个系的最高分,并且按系编号,学生编号升序排列.这个查询比较复杂,也比较典型,自从用了ORM后,很久没有写过SQL语句了 ...
- 【转】MessageBox的常见用法
网址:http://www.douban.com/note/40199603/ 一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PCh ...
- Android_SQLite版本升级,降级 管理
今天我们主要学习了数据库版本升级对软件的管理操作. 我们手机经常会收到xxx软件升级什么的提醒,你的软件版本更新,同时你的数据库对应的版本也要相应的更新. 数据库版本更新需要主要的问题: 软件的1.0 ...
- xshell xftp
xshell : http://www.netsarang.com/xshell_download.html xftp:http://www.netsarang.com/products/xfp_ov ...
- ZOJ 3209 Treasure Map (Dancing Links)
Treasure Map Time Limit: 2 Seconds Memory Limit: 32768 KB Your boss once had got many copies of ...