html - Bootstrap 类名顺序命名约定
问题描述
我有一个当前的 Bootstrap 幻灯片。我们希望所有元素都有多个类,每个部门都会得到前缀,例如:
finance carousel-inner, finance carousel-item
marketing carousel-inner, marketing carousel-active
原因是:每个部门都可以有自己的 CSS 样式。所以金融有绿色边框轮播,营销有红色,采购有蓝色等等。
最好在所有课程之前或之后添加部门班级名称?像这样的例子
finance carousel-inner
OR carousel-inner finance
- Bootstrap 会以不同的方式反应吗?在这个堆栈中,它说顺序有点重要项目上列出的类的顺序会影响 CSS 吗?
我的问题是首选的命名约定是什么,或者它在 Bootstrap 中真的很重要吗?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
解决方案
如果我理解您的问题,只要将 .finnace 赋予相同的元素,在 .caruser-inner 之前或之后添加 .finnace 就没有任何区别:
.finance {border: 1px solid green;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner finance">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr />
<div id="carouselExampleControls1" class="carousel slide" data-ride="carousel">
<div class="finance carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
推荐阅读
- java - 简单的 android 着色器编译但链接失败
- fortran - FFTW vsfourn 子程序结果不匹配
- javascript - 如何为d3.js中条形图中的每个条形分配不同的颜色
- wpf - WPF ListView CellTemplate 绑定
- java - Java 对与 HashMap
- javascript - 尝试淡入/淡出 html5 音频文件 vuejs / vanilla js
- html - 使用 CSS 和 Bootstrap 4 自定义边缘平滑的边框
- sql - 创建新列,所有内容都在另一列的第三和第四之间
- c++ - 来自 C++ 的 Angelscript 传输数组
- ruby - Ruby 地图给出了奇怪的结果