bootstrap学习之路2

上一次简单介绍了一下bootstrap这个开源框架,这次继续bootstrap深入之路,从Less说起。。。。

关于less

less是一门预处理语言,是对css的扩展,它使得css语言了动态语言的一些特性,如变量,继承,运算,函数等,使得css更加灵活强大,less的语言很简单,学习了css的朋友对于less的语法,上手基本没有难度。现在来看看less的以下特性:

  • 变量

  less中这样定义变量:@fontsize:14px;使用变量,h3{font-size:@fontsize},编译后的css就是h3{font-size:14px;}

  • 继承

  利用less可以将一个定义好的类A引入类B中,从而实现类B对类A的继承

  .A{font-size=15px;border:1px 0px;padding:15px;10px;}

  #header{ color:red;.A;}

  • 函数

  less可以创建一个函数,从而实现css更大的灵活性

  .A(@color:#fffff){font-size=15px;border:1px 0px;padding:15px;10px;color:@color}

  #header{.A(#ccccc)}

  编译后#header{font-size=15px;border:1px 0px;padding:15px;10px;color:#cccccc}

  • 运算

  在less中可以对属性进行四则运算

  @my-border:1px;

  @my-color:#cccccc;

  #header{border:(@my-border * 2);

       font-color:(@my-color+#acbcfc);

      }

  • 编译

LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。

 客户端的less使用,先在页面中引入.less样式表----<link rel="stylesheet/less" type="text/css" href="styles.less" />(注意:rel是"stylesheet/less")

  然后下载less.js并引入到页面<head> </head>之中,<script src="less.js" type="text/javascript"></script>(注意:要先加载样式表)

  关于less的更多语言细节及使用可以访问http://less.bootcss.com/features/或者上github上去fork一个看一下, github地址:https://github.com/less/less.js

时间: 2024-12-29 15:43:26

bootstrap学习之路2的相关文章

Bootstrap学习之路(1)---开篇-登陆页

Bootstrap是现在很流行的一套前端框架,尤其是它的自适应,真的很不错,而且对移动设备也很友好,可以达到快速开发的效果,最近想把自己的网站弄个手机版,很果断的就选用了bootstrap,跟大家分享一下我的学习心得,文笔水平不太好,大家见谅,看不懂的可以回复提问,我会回答的. 先去官网下载bootstrap的编译好的必要文件http://d.bootcss.com/bootstrap-3.2.0-dist.zip(注意!!下载下来的文件目录结构不要弄乱了,那里有个字体库的文件,是用来显示字体图

bootstrap学习之路

接触bootstrap也半年有余,从一开始不知道如何使用,到知道其各个模块的具体功能,再到提炼哪些使用的比较多,再此又体会到bootstrap源码的精髓,通过oocss写的类使其感觉更有易用性,开始本想对其各个板块,按钮进行逐一分析,总结出属于自己的一套css代码(自己也有属于自己的库,对各个组件的样式理解的更为透彻).但因为部门扩大,自己不得不在JS上花费精力,导致最终想法并未实现. 到现在深刻感觉到,响应式布局确实是这个社会的潮流以及未来发展方向.为此也发现自己对于bootstrap的理解确

Bootstrap学习之路(2)---导航组件

在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> <li class="active"><a href="http://www.weixh.net">微笑话</a></li> <li><a href="#">图文</a&g

Bootstrap学习:Bootstrap 网格系统

前面3节其实就是对w3c菜鸟日记的一个粘贴复制,下面开始真正的学习之路不过之. Bootstrap 网格系统 先做个介绍吧,看不懂的可以掠过,一样取自<w3c菜鸟日记> 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的非常有效的方法. 简单地说,网页设计中的网格用于组织内容,

Python学习之路—2018/6/29

Python学习之路-2018/6/29 1.跨表查询 跨表查询: 基于对象查询 基于双下划线查询 聚合和分组查询 F与Q查询 F查询 过滤器只能讲字段值与常量进行比较,如果需要用到与字段值进行比较则需要用到F查询,F查询还支持与常量之间的加减乘除的运算.数据: # 查询评论数大于阅读数的书籍 >>> Book.objects.filter(comment_count__gt=F("read_count")) <QuerySet [<Book: 斗破苍穹&

Python学习之路—2018/7/10

Python学习之路-2018/7/10 博客开发项目流程 ? 一般来说,一个项目的开发流程分为:项目需求.设计表结构.功能开发.测试功能.产品上线,本次学习以博客园为蓝本进行开发. 1.项目需求 博客的开发的需求主要有以下几点: 基于auth模块和Ajax实现登录验证 基于forms组件和Ajax实现注册功能 设计博客首页 设计个人站点页面 设计文章详情页面 实现文章点赞功能 实现文章的评论功能,包括对文章的评论以及对文章评论的评论 实现富文本编辑框 防止xss攻击(例如当用户的文章中含有JS

Python学习之路—2018/7/11

Python学习之路-2018/7/10 3.功能开发 3.1 登录验证 login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <t

Azure云平台学习之路(三)——Cloud Services

1.什么是云服务? 能够部署高度可用的且可无限缩放的应用程序和API.简而言之,就是你写的CMD程序按照一定的框架进行少量修改就能运行在Azure云平台上. 2.Azure云服务有什么特点? (1)专注应用程序而不是硬件,PaaS的一种. (2)支持多种框架和语言. (3)集成了运行状况监视和负载平衡. (4)自动缩放优化成本和性能 3.建立云服务之前,我们需要建立一个云存储,来记录我们的程序的日志信息(当然,这不是必须的) (1)选择左边导航栏的"存储".主面板上显示的是所有已有的存

linux学习之路之LVM

试想一种情况,当初我们在规划磁盘的时候,只给某一个磁盘或分区之划分了30G的容量,但是后来,随着业务的需求,该磁盘或者分区的使用量会越来越大,等到以后再有数据存放时,发现该磁盘或者分区的容量不够用,此时该怎么办了?可以新增一个磁盘,经过格式化,挂载等过程就可以使用这个磁盘了,再将原来磁盘的数据完全的复制过来.等到后来又发现,规划的磁盘又太大了,然后又使用上述方法来减少磁盘的大小.虽然这种方法可行,但是效率低,比较复杂.不应该是我们首选的方法. 当然,我们可以这样做,将多个磁盘或者分区(PV)组合