html – 如何避免重复多个css类
由于bootstrap3,很多我的html将会这样结束:
<div class="form-group"> <label class="control-label col-xs-4 col-sm-6">Name on card</label> <div class="col-xs-8 col-sm-6"> <input class="form-control" type="text" placeholder="Name on Card" required /> </div> </div> <div class="form-group"> <label class="control-label col-xs-4 col-sm-6">Card Number</label> <div class="col-xs-8 col-sm-6"> <input class="form-control" type="text" placeholder="Card Number" name="EWAY_CARDNUMBER" required value="4444333322221111" /> </div> </div> 参见上面的代码,标签节点有不同媒体屏幕的多个类.我想简单地用自己的课来缩短他们的课程. 我试图减少创建一个从多个类延伸的类 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 <div id='finalise'> <form class='form-horizontal'> <div class='form-group' > <label class='my-label' /> <div class='my-controls'> <input class="form-control" type="text" placeholder="Name on Card" required /> </div> ... </div> </form> </div> 减: #finalise { .my-label:extend(.control-label 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: HTML <div id='finalise'> <form class='form-horizontal'> <div class='form-group' > <label class='control-label' /> <div class='controls'> <input class="form-control" type="text" placeholder="Name on Card" required /> </div> ... </div> </form> </div> 减: #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); } } 解决方法
你必须自己解决问题,但是Bootstrap提供了LESS mixins来减少由负责的网格列引起的选择器膨胀
http://getbootstrap.com/css/#grid-less 你可以这样做(从文档) .wrapper { .make-row(); } .content-main { .make-lg-column(8); } .content-secondary { .make-lg-column(3); .make-lg-column-offset(1); } … <div class="wrapper"> <div class="content-main">...</div> <div class="content-secondary">...</div> </div> 更新: http://getbootstrap.com/css/#less-mixins-vendor http://getbootstrap.com/css/#less-mixins-utility (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |