html应用多个类,html – 如何避免重复多个css类

由于bootstrap3,很多我的html将会这样结束：

Name on card

Card Number

参见上面的代码,标签节点有不同媒体屏幕的多个类.我想简单地用自己的课来缩短他们的课程.

我试图减少创建一个从多个类延伸的类

my-control-label:extend(.control-label, .col-xs-4, col-sm-6){}

但是,这不行,因为较少的使用完全匹配上面的例子.是的,我可以尝试扩展“所有”,如下所示：

my-control-label:extend(.control-label all, .col-xs-4 all, col-sm-6 all){}

但这是令人讨厌的,它会吹动生成的css.

那么有什么容易的方式来避免这样的重复？

谢谢,

罗恩

更新#1：

甚至延伸一切都不适用于我的情况

HTML

...

减：

#finalise {

.my-label:extend(.control-label all, .col-xs-4 all, .col-sm-3 all, .col-lg-2 all){}

.my-controls:extend(.control-label all, .col-xs-8 all, .col-sm-5 all, .col-lg-4 all){}

}

生成css：

@media (min-width: 768px) {

.form-horizontal .control-label,

.form-horizontal #finalise .label,

.form-horizontal #finalise .controls {

text-align: right;

}

看到第三行将不会应用html节点,这就是为什么它不起作用.

有什么建议么？

更新#2：

虽然它不是将几个类组合成一个自定义类的通用方法,但它解决了这个问题.它使用引导网格混合解决了这个问题.感谢NiloVelez

HTML

...

减：

#finalise {

.form-group {

.make-row();

}

.control-label {

.make-xs-column(4);

.make-sm-column(5);

.make-lg-column(6);

}

.controls {

.make-xs-column(8);

.make-sm-column(5);

.make-lg-column(6);

}

html应用多个类,html – 如何避免重复多个css类相关推荐

jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 应用开发教程之十三 - 如何添加自定义 CSS 类
本教程的上一篇文章:SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化,我们介绍了如何使用 SAP UI5 标准定义的 CSS 类来美化自己的应用程序. 本文我们继续 CS ...
Joomla css类后缀
在模块设置界面和菜单项设置界面有[模块类后缀][自定义模块名称CSS类]和[菜单项链接CSS类][目标页面CSS类],如下图: 这里说的CSS类是指CSS的class类选择器,Joomla的这个功能允 ...
php+jq+添加css,jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
php 类接口的区别吗,PHP的接口类(interface)和抽象类(abstract)的区别
/** * 接口类:interface * 其实他们的作用很简单,当有很多人一起开发一个项目时,可能都会去调用别人写的一些类, * 那你就会问,我怎么知道他的某个功能的实现方法是怎么命名的呢,这个时候 ...
java基础教程类_Java零基础系列教程06初识类和对象
配套视频教程万物皆对象分类是人们认识世界的一个很自然的过程,在日常生活中会不自觉地进行分类身边的对象顾客姓名-张浩年龄-20 体重-60kg 操作: 购买商品收银员员工号-10001 ...
java返回有什么用,java中的return this什么时候用，返回的是类里面的方法类型，还是实例类？上面的代码什么意思...
java中的return this什么时候用,返回的是类里面的方法类型,还是实例类??下面的代码什么意思? public class RoleService extends BaseService { ...
第88天：HTML5中使用classList操作css类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

html应用多个类,html – 如何避免重复多个css类

html应用多个类,html – 如何避免重复多个css类相关推荐

最新文章

热门文章