Bootstrap
一、自定义控件
1.自定义复选框
<div class="container">
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">自定义复选框</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
<label class="custom-control-label" for="customCheck1">abc</label>
</div>
</form>
</div>
2.自定义滑块控件
<div class="container">
<form>
<label for="customRange">自定义滑块控件</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
</div>
3.选择文件
<div class="container">
<form>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">选择文件</label>
</div>
</form>
</div>
二、轮播
- class=“carousel slide” 表示轮播,有滑动的效果
- data-ride=“carousel” 触发轮播动作
- class=“carousel-inner” 表示轮播的内容
- class=“carousel-item active” 表示轮播一张张图片
- class=“carousel-caption” 来设置轮播图片的描述文本
轮播图:
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo