Bootstrap（四）——自定义控件、轮播、模态框、提示框、弹出框

最新推荐文章于 2022-01-11 16:24:55 发布

猫与故巷0214

最新推荐文章于 2022-01-11 16:24:55 发布

阅读量3.1k

点赞数

文章标签：前端 html bootstrap

本文链接：https://blog.csdn.net/qq_44827845/article/details/116942563

版权

本文详细介绍了Bootstrap中的自定义控件，包括自定义复选框、滑块和文件选择，以及轮播、模态框、提示框和弹出框的使用方法和示例。轮播通过class和data-ride属性实现动态效果；模态框利用data-toggle和data-dismiss控制显示和关闭；提示框和弹出框借助data-toggle和data-placement设置显示内容和方向。

摘要由CSDN通过智能技术生成

一、自定义控件

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