修改默认效果
<style>
[type="checkbox"]{
/* 去掉默认样式 */
appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
background: url(./images/checkbox-f.png) no-repeat left center;
width: 16px;
height: 16px;
}
input[type="checkbox"]:checked{
background: url(./images/checkbox-t.png) no-repeat left center;
}
</style>
bootstrap
bootstrap的栅格系统
栅格系统 的最外层必须有一个类名container
每一行的类名为 row
每一列的类名为 col
使栅格系统 在不同的屏幕宽度下，显示不同的布局方式，可以
用 col-前缀 添加 列宽 列数 来设置
列宽设置依据
sm 屏幕宽度最小是 576px
md 屏幕宽度最小是 768px
lg 屏幕宽度最小是 992px
xl 屏幕宽度最小是 1200px
xxl 屏幕宽度最小是 1400px
col-lg-4 含义是 在 大于992px 小于1200px的宽度下，占据4列栅格
栅格系统，把屏幕的总宽度默认分割成12列，元素可以在这12列中布局
button按钮
在 bootstrap 中 使用 按钮步骤
1. 给需要设置成为按钮的标签，设置 基础类名 btn
2，根据按钮功能，设置不同功能名字的 类名
由于a没有disabled属性，所以给a添加类名disabled
字体图标
<head>
<link rel="stylesheet" href="./bootstrap/bootstrap-icons.min.css">
</head>
<body>
<i class="txt bi-alarm"></i>
<i class="txt bi-search"></i>
<i class="txt bi-airplane"></i>
<i class="txt bi-car-front-fill"></i>
<i class="txt bi-chat-right-dots"></i>
<i class="txt bi-twitter"></i>
<i class="txt bi-telegram"></i>
</body>
组件
<body>
<!-- 下拉菜单 -->
<div class="drop1 dropdown">
<span class="dropdown-toggle" data-bs-toggle="dropdown">点击下拉</span>
<ul class="dropdown-menu">
<li>东胜神州</li>
<li>南詹步洲</li>
<li>西牛贺州</li>
<li>北俱芦洲</li>
</ul>
</div>
<!-- 深色下拉框 -->
<div class="dropdown">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">点击下拉</button>
<ul class="dropdown-menu dropdown-menu-dark">
<!-- 设置下拉的标题 -->
<li class="dropdown-header">天下四州</li>
<li><a href="" tabindex="1">东胜神州</a></li>
<li><a href="" tabindex="2">南詹步洲</a></li>
<li><a href="" tabindex="3">西牛贺州</a></li>
<li><a href="" tabindex="4">北俱芦洲</a></li>
</ul>
</div>
<!-- 导航元素 -->
<!-- tab 切换形式 -->
<!-- <nav class="nav nav-tabs"> -->
<!-- 胶囊形式 -->
<nav class="nav nav-pills ">
<div class="nav-item"><a href="#a" data-bs-toggle="tab" class="nav-link active">首页</a></div>
<div class="nav-item"><a href="#b" data-bs-toggle="tab" class="nav-link">生活页</a></div>
<div class="nav-item"><a href="#c" data-bs-toggle="tab" class="nav-link">新闻页</a></div>
<div class="nav-item"><a href="#d" data-bs-toggle="tab" class="nav-link">体育页</a></div>
</nav>
<!-- tab 切换的实体 -->
<div class="tab-content">
<div class="tab-pane active fade" id="a">欢迎来到首页</div>
<div class="tab-pane fade" id="b">台风席卷华北</div>
<div class="tab-pane fade" id="c">给生活带来了不便</div>
<div class="tab-pane fade" id="d">中国女足勇夺世界杯</div>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a href="##" class="navbar-brand">导航栏</a>
<!-- 缩小之后的导航按钮 -->
<button type="button " class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
<a href="##" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="##" class="nav-link">新闻页</a>
</li>
<li class="nav-item">
<a href="##" class="nav-link">体育页</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 模态框
data-bs-target 绑定一个操作源，告诉bootstrap操作的是具体哪
一个元素
data-bs-target="abc" 操作的是id=abc的元素
dropdown 表示下拉框
modal 表示模态框
-->
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#mo">点击弹出模态框</button>
<!-- 透明层 -->
<div class="modal fade" id="mo">
<!-- 内部框 -->
<div class="modal-dialog">
<!-- 内容 -->
<div class="modal-content">
<!-- 头部 -->
<div class="modal-header">
<h3>锄禾日当午</h3>
<!-- 删除 -->
<span class="close" data-bs-dismiss="modal">×</span>
</div>
<div class="modal-body">
<p>曲项向天歌</p>
<p>夜来风雨声</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-bs-dismiss="modal">取消</button>
<button class="btn btn-success" data-bs-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="./bootstrap/bootstrap.js"></script>
轮播图
<body>
<div class="carousel slide" id="banner">
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/191.png" alt="">
</div>
<div class="carousel-item">
<img src="./images/192.png" alt="">
</div>
<div class="carousel-item">
<img src="./images/195.png" alt="">
</div>
<div class="carousel-item">
<img src="./images/196.png" alt="">
</div>
</div>
<!-- 左右切换 -->
<a href="#banner" class="carousel-control-prev dur" data-bs-slide="prev">‹</a>
<a href="#banner" class="carousel-control-next dur" data-bs-slide="next">›</a>
<!-- 分页器 -->
<div class="carousel-indicators">
<button data-bs-target="#banner" data-bs-slide-to="0" class="btn active" aria-current="true" aria-label="Slide 1"></button>
<button class="btn" data-bs-target="#banner" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button class="btn" data-bs-target="#banner" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button class="btn" data-bs-target="#banner" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
</div>
</body>
</html>
<script src="./bootstrap/bootstrap.js"></script>
2146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
