【bootstrap 入门】
2024-05-16 10:32:22
目录
- bootstrap
- 引入bootstrap
- container 容器
- container-fluid
- grid 网格
- 网格选项
- 自动布局列
- 文字
- 标题
- 内联文本元素
- 颜色
- 表格
- 图片
- 超大屏幕
- 信息提示框
- 关闭信息提示框
- 按钮
- 按钮组
- 徽章
- 进度条
- 动态进度条
- 加载效果
- 分页
- 列表组
- 基本列表组
- 编号列表组
- 自定义列表组
- 复选框列表组
- 上下文列表组
- 卡片
- 卡片样式
- 导航样式
- 图像叠加
bootstrap
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
下载地址：bootstrap
下载地址：popper
下载地址：bootstrap中文网
下载地址：bootcss
引入bootstrap
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入bootstrap</title><script src="./dist/popper.min.js"></script><link rel="stylesheet" href="./dist/css/bootstrap.min.css"><script src="./dist/js/bootstrap.min.js"></script>
</head>
<body><button class="btn">基本按钮</button><button class="btn btn-primary">主要按钮</button><button class="btn btn-secondary">次要按钮</button><button class="btn btn-success">成功按钮</button><button class="btn btn-info">消息按钮</button><button class="btn btn-warning">危险按钮</button><button class="btn btn-dark">深色按钮</button><button class="btn btn-light">浅色按钮</button><button class="btn btn-link">链接按钮</button>
</body>
</html>
container 容器
container类出现内边距和外边距。
<body><div class="container"><img src="../img/111.png" width="100%" alt=""></div>
</body>
container-fluid
container-fluid类没有内边距和外边距。
<body><div class="container-fluid"><img src="./img/java.jpg" width="100%" alt=""></div>
</body>
grid 网格
网格选项
Bootstrap的网格系统可以适应所有六个默认断点
- 超小 （xs）
- 小号 （sm）
- 中等（md）
- 大（lg）
- 特大号 （xl）
- 特大号 （xxl）
自动布局列
- row 行
- col 列
<body><div class="container"><div class="row show"><div class="col-md-3 col-sm-4">1/4</div><div class="col-md-6 col-sm-4">1/2</div><div class="col-md-3 col-sm-4">1/4</div></div><div class="row show"><div class="col-lg-4 col-md-6">1/3</div><div class="col-lg-4 col-md-6">1/3</div><div class="col-lg-4 col-md-12">1/3</div></div><div class="row show"><div class="col-lg-9 col-md-6">3/4</div><div class="col-lg col-md-6">1/4</div></div></div>
</body>
文字
标题
<body><h1>h1标题</h1><h2>h2标题</h2><h3>h3标题</h3><h4>h4标题</h4><h5>h5标题</h5><h6>h6标题</h6><p class="h1">h1标题</p><p class="h2">h2标题</p><p class="h3">h3标题</p><p class="h4">h4标题</p><p class="h5">h5标题</p><p class="h6">h6标题</p><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1><h1 class="display-5">Display 5</h1><h1 class="display-6">Display 6</h1>
</body>
内联文本元素
<body><h3>花哨的显示标题<small class="text-muted">带有褪色的辅助文本</small></h3><p>您可以使用标记标记来 <mark>突出显示</mark>文本。</p><p><del>此行文本应被视为已删除的文本。</del></p><p><s>这行文字应被视为不再准确。</s></p><p><ins>这行文本旨在被视为对文档的补充。</ins></p><p><u>此行文本将呈现为带下划线。</u></p><p><small>这行文字旨在被视为精美的印刷品。</small></p><p><strong>此行呈现为粗体文本。</strong></p><p><em>此行呈现为斜体文本。</em></p><p><abbr title="attribute">attr</abbr></p><p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p><!--text-center 文本居中text-end 文本结尾--><figure class="text-center"><blockquote class="blockquote"><p>包含在块引用元素中的已知引用。</p></blockquote><figcaption class="blockquote-footer">在源标题中出名的人<cite title="Source Title">Source Title</cite></figcaption></figure>
</body>
颜色
<body><p class="text-primary">主要文本</p><p class="text-secondary">次要文本</p><p class="text-success">成功文本</p><p class="text-info">消息文本</p><p class="text-warning">警告文本</p><p class="text-danger">危险文本</p><p class="text-dark">深文本文本</p><p class="text-light bg-black">浅色文本</p><p class="text-white bg-danger">白文本</p><p class="text-muted">柔和文本</p><p class="text-body">默认文本</p><p class="text-black-50">50% 黑文本</p>
</body>
表格
<body><div class="container table-responsive"><div class="row"><div class="col-md-12"><!--hover 悬停striped 条纹行striped-columns 条纹列active 活动的bordered 边框borderless 无边框group-divider 分隔符responsive 响应align-middle 中间对齐align-bottom 底部对齐align-top 顶不对齐caption 标题--><table class="table caption-top table-hover table-striped table-striped-columns table-bordered border-primary align-middle "><caption>用户列表</caption><thead class="text-bg-primary"><th>序号</th><th>姓名</th><th>性别</th></thead><tbody class="table-group-divider"><tr><td>1</td><td colspan="2" class="table-active">张三</td></tr><tr><td>2</td><td>李四</td><td>女</td></tr><tr><td>3</td><td>小王</td><td>男</td></tr><tr><td>4</td><td>小罗</td><td>女</td></tr></tbody></table></div></div></div>
</body>
图片
<body><div class="container"><!--circle 圆img-thumbnail 图像缩略图img-fluid 响应式图像--><img src="./img/python.jpg" class="rounded" width="300px" alt=""><img src="./img/java.jpg" class="rounded-circle" width="300px" alt=""><img src="./img/python.jpg" class="img-thumbnail" width="300px" alt=""><br><img src="./img/css.jpg" class="float-start" width="300px" alt=""><img src="./img/css.jpg" class="float-end" width="300px" alt=""><div class="clear:both"></div><img src="./img/php.jpg" class="mx-auto d-block" width="300px" alt=""><br><img src="./img/网页.jpg" class="img-fluid" alt=""></div>
</body>
超大屏幕
<body><div class="container"><h2>超大屏幕</h2><div class="bg-info text-light rounded mt-5 p-5 "><h2>送别</h2><p>山中相送罢</p><p>日暮掩柴扉</p><p>春草明年绿</p><p>王孙归不归</p></div></div>
</body>
信息提示框
<body><div class="container"><div class="alert alert-success"><strong>成功</strong>提示框</div><div class="alert alert-info"><strong>信息</strong>提示框</div><div class="alert alert-warning"><strong>警告</strong>提示框</div><div class="alert alert-danger"><strong>错误</strong>提示框</div><div class="alert alert-primary"><strong>首选</strong>提示框</div><div class="alert alert-secondary"><strong>次要</strong>提示框</div><div class="alert alert-dark"><strong>深色</strong>提示框</div><div class="alert alert-light"><strong>浅色</strong>提示框</div><div class="alert alert-link"><strong>链接</strong>提示框</div><div class="alert alert-light"><a class="alert-link" href="https://www.csdn.net/">csdn</a></div></div>
</body>
关闭信息提示框
<body><div class="container"><div class="pt-5"><div class="alert alert-success alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>成功</strong>提示框</div><div class="alert alert-info alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>信息</strong>提示框</div><div class="alert alert-warning alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>警告</strong>提示框</div><div class="alert alert-danger alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>错误</strong>提示框</div><div class="alert alert-primary alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>首选</strong>提示框</div><div class="alert alert-secondary alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>次要</strong>提示框</div><div class="alert alert-dark alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>深色</strong>提示框</div><div class="alert alert-light alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>浅色</strong>提示框</div><div class="alert alert-link alert-dismissible fade show"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>链接</strong>提示框</div></div></div>
</body>
按钮
<body><div class="container"><div class="p-3"><button class="btn">基本按钮</button><button class="btn btn-primary">主要按钮</button><button class="btn btn-secondary">次要按钮</button><button class="btn btn-success">成功按钮</button><button class="btn btn-info">消息按钮</button><button class="btn btn-warning">危险按钮</button><button class="btn btn-dark">深色按钮</button><button class="btn btn-light">浅色按钮</button><button class="btn btn-link">链接按钮</button></div><div class="p-5"><a class="btn btn-info" href="https://www.csdn.net/">csdn</a><button class="btn btn-secondary">主要按钮</button><input type="button" class="btn btn-info" value="按钮框"><input type="submit" class="btn btn-info" value="按钮框"><div class="p-3"><button class="btn btn-outline-primary">主要按钮</button><button class="btn btn-outline-secondary">次要按钮</button><button class="btn btn-outline-success">成功按钮</button><button class="btn btn-outline-info">消息按钮</button><button class="btn btn-outline-warning">危险按钮</button><button class="btn btn-outline-dark">深色按钮</button><button class="btn btn-outline-light text-dark">浅色按钮</button></div><div class="p-3"><button class="btn btn-primary btn-lg">大号按钮</button><button class="btn btn-primary">默认按钮</button><button class="btn btn-primary btn-sm">小号按钮</button></div></div><div class="row"><div class="col"></div><div class="col-6"><div class="d-grid"><button class="btn btn-primary">主要按钮</button></div></div><div class="col"></div></div><div class="p-3"><a class="btn btn-info active" href="https://www.csdn.net/">csdn</a><button class="btn btn-secondary active">主要按钮</button><input type="button" class="btn btn-info active" value="按钮框"><input type="submit" class="btn btn-info active" value="按钮框"><br><a class="btn btn-info disabled" href="https://www.csdn.net/">csdn</a><button class="btn btn-secondary disabled">主要按钮</button><input type="button" class="btn btn-info disabled" value="按钮框"><input type="submit" class="btn btn-info disabled" value="按钮框"></div><div class="p-3"><button class="btn btn-primary btn-lg"><span class="spinner-border spinner-border-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg disabled"><span class="spinner-border spinner-border-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg"><span class="spinner-grow spinner-grow-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg disabled"><span class="spinner-grow spinner-grow-sm"></span> 加载中请稍后...</button></div></div>
</body>
按钮组
<body><div class="container"><div class="p-3"><div class="btn-group mt-5"><button class="btn btn-primary btn-lg">大号按钮</button><button class="btn btn-primary btn-lg">大号按钮</button><button class="btn btn-primary btn-lg">大号按钮</button></div><div class="btn-group mt-5"><button class="btn btn-primary">默认按钮</button><button class="btn btn-secondary">默认按钮</button><button class="btn btn-success">默认按钮</button></div><div class="btn-group mt-5"><button class="btn btn-primary btn-sm">小号按钮</button><button class="btn btn-secondary btn-sm">小号按钮</button><button class="btn btn-success btn-sm">小号按钮</button></div><br><div class="btn-group btn-group-lg mt-5"><button class="btn btn-primary">大号按钮</button><button class="btn btn-secondary">大号按钮</button><button class="btn btn-success">大号按钮</button></div><div class="btn-group mt-5"><button class="btn btn-primary">默认按钮</button><button class="btn btn-secondary">默认按钮</button><button class="btn btn-success">默认按钮</button></div><div class="btn-group btn-group-sm mt-5"><button class="btn btn-primary">小号按钮</button><button class="btn btn-secondary">小号按钮</button><button class="btn btn-success">小号按钮</button></div><br><div class="btn-group mt-5"><button type="button" class="btn btn-danger">左</button><button type="button" class="btn btn-warning">中</button><button type="button" class="btn btn-success">右</button></div><br><div class="btn-group btn-group-vertical mt-5"><button class="btn btn-primary">默认按钮</button><button class="btn btn-secondary">默认按钮</button><button class="btn btn-success">默认按钮</button></div><br><div class="btn-group mt-5"><button class="btn btn-primary">主页</button><button class="btn btn-primary">简介</button><div class="btn-group"><button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">分类</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="https://www.csdn.net/">csdn</a></li><li><a class="dropdown-item" href="https://www.bilibili.com/">bilibili</a></li></ul></div></div><br><div class="btn-group btn-group-vertical mt-5"><button class="btn btn-primary">主页</button><button class="btn btn-primary">简介</button><div class="btn-group"><button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">分类</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="https://www.csdn.net/">csdn</a></li><li><a class="dropdown-item" href="https://www.bilibili.com/">bilibili</a></li></ul></div></div></div></div>
</body>
徽章
<body><div class="p-3"><span class="badge bg-primary">主要</span><span class="badge bg-secondary">次要</span><span class="badge bg-success">成功</span><span class="badge bg-info">信息</span><span class="badge bg-warning">警告</span><span class="badge bg-danger">错误</span><span class="badge bg-dark text-light">深色</span></div><div class="p-3"><span class="badge rounded-pill bg-primary">主要</span><span class="badge rounded-pill bg-secondary">次要</span><span class="badge rounded-pill rounded-pill bg-success">成功</span><span class="badge rounded-pill bg-info">信息</span><span class="badge rounded-pill bg-warning">警告</span><span class="badge rounded-pill bg-danger">错误</span><span class="badge rounded-pill bg-dark text-light">深色</span></div><div class="p-3"><span class="badge rounded-circle bg-primary">主要</span><span class="badge rounded-circle bg-secondary">次要</span><span class="badge rounded-circle rounded-pill bg-success">成功</span><span class="badge rounded-circle bg-info">信息</span><span class="badge rounded-circle bg-warning">警告</span><span class="badge rounded-circle bg-danger">错误</span><span class="badge rounded-circle bg-dark text-light">深色</span></div><div class="p-3"><span class="badge text-bg-primary">主要</span><span class="badge text-bg-secondary">次要</span><span class="badge text-bg-success">成功</span><span class="badge text-bg-danger">危险</span><span class="badge text-bg-warning">警告</span><span class="badge text-bg-info">信息</span><span class="badge text-bg-light">浅色</span><span class="badge text-bg-dark">深色</span></div><div class="p-3"><button type="button" class="btn btn-primary">通知 <span class="badge rounded-pill bg-info">3</span></button></div><div class="p-3"><button type="button" class="btn btn-primary position-relative">收件箱<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span></button></div><div class="p-3"><button type="button" class="btn btn-primary position-relative">轮廓<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"></span></button></div>
</body>
进度条
<body><div class="container p-5"><div class="progress" style="height:10px ; width: 300px;"><div class="progress-bar bg-primary" style="width:80%">80%</div></div><br><div class="progress" style="height:20px ; width: 600px;"><div class="progress-bar bg-danger" style="width:80%">80%</div></div><br><div class="progress" style="height:30px ;"><div class="progress-bar bg-success" style="width:80%">80%</div></div><br><div class="progress" style="height:10px ; width: 300px;"><div class="progress-bar progress-bar-striped bg-primary" style="width:80%">80%</div></div><br><div class="progress" style="height:20px ; width: 600px;"><div class="progress-bar progress-bar-striped bg-danger" style="width:80%">80%</div></div><br><div class="progress" style="height:30px ;"><div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width:80%">80%</div></div><br><div class="progress"><div class="progress-bar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-success" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-danger" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div></div></div>
</body>
动态进度条
<body><div class="progress" style="height:30px ;"><div id="progress" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width:0%"></div></div>
</body>
<script src="../jQuery/jquery-3.6.0.min.js"></script>
<script>$(function(e) {let percent = 0;let stop = setInterval(() => {let width = Math.ceil(Math.random() * 10);percent += width;percent = percent >= 100 ? 100 : percent;if (percent == 100) {$('#progress').text(percent + '%');$('#progress').css({width: percent + '%'});clearInterval(stop);} else {$('#progress').text(percent + '%');$('#progress').css({width: percent + '%'});}}, 500);});
</script>
加载效果
<body><div class="container pt-5"><div class="spinner-border spinner-border-sm"></div><div class="spinner-grow spinner-grow-sm"></div><div class="spinner-border"></div><div class="spinner-grow bg-primary"></div><div class="spinner-grow bg-secondary"></div><div class="spinner-grow bg-success"></div><div class="spinner-grow bg-danger"></div><div class="spinner-grow bg-warning"></div><div class="spinner-grow bg-dark"></div><div class="spinner-grow bg-light"></div><br><button class="btn btn-primary btn-lg"><span class="spinner-border spinner-border-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg disabled"><span class="spinner-border spinner-border-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg"><span class="spinner-grow spinner-grow-sm"></span> 加载中请稍后...</button><button class="btn btn-primary btn-lg disabled"><span class="spinner-grow spinner-grow-sm"></span> 加载中请稍后...</button></div>
</body>
分页
<body><div class="container pt-5"><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="javascript:void(0)">首页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li><li class="page-item active"><a class="page-link" href="javascript:void(0)">3</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">下一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">尾页</a></li></ul><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">首页</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">上一页</a></li><li class="page-item active"><a class="page-link" href="javascript:void(0)">1</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">5</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">下一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">尾页</a></li></ul><ul class="pagination pagination-sm justify-content-end"><li class="page-item"><a class="page-link" href="javascript:void(0)">首页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li><li class="page-item active"><a class="page-link" href="javascript:void(0)">5</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">下一页</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">尾页</a></li></ul><ul class="pagination pagination-sm justify-content-around"><li class="page-item"><a class="page-link" href="javascript:void(0)">首页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li><li class="page-item active"><a class="page-link" href="javascript:void(0)">5</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">下一页</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">尾页</a></li></ul><ul class="pagination pagination-sm justify-content-between"><li class="page-item"><a class="page-link" href="javascript:void(0)">首页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">2</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">3</a></li><li class="page-item"><a class="page-link" href="javascript:void(0)">4</a></li><li class="page-item active"><a class="page-link" href="javascript:void(0)">5</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">下一页</a></li><li class="page-item disabled"><a class="page-link" href="javascript:void(0)">尾页</a></li></ul></div>
</body>
列表组
基本列表组
<body><div class="container"><ul class="list-group mt-3"><!--group 组item 项目active 激活disabled 禁用action 动作flush 齐平、冲洗（没有边框和圆角）horizontal 横向decoration 装饰aria-current 当前段--><li class="list-group-item active" aria-current="true">第一项</li><li class="list-group-item disabled">第二项</li><li class="list-group-item">第三项</li></ul><ul class="list-group list-group-numbered mt-3"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li></ul><ul class="list-group mt-3"><li class="list-group-item list-group-item-action">第一项</li><li class="list-group-item list-group-item-action">第二项</li><li class="list-group-item list-group-item-action">第三项</li></ul><ul class="list-group list-group-flush mt-3"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li></ul><ul class="list-group list-group-horizontal mt-3"><li class="list-group-item">第一项</li><li class="list-group-item">第二项</li><li class="list-group-item">第三项</li></ul></div>
</body>
编号列表组
<body><div class="container"><!--justify-content-between 两者之间的两端对齐align 对齐fw-bold w-bold 粗体文本fw-bolder 粗体文本(相对于父元素)fw-normal 正常的文本fw-light 细体文本fw-lighter 细体文本(相对于父元素)fst-italic 斜体fst-normal 正常字体样式的文本 取消斜体ms-auto元素居左.{margin-left:auto!important}me-auto元素居右.{margin-right:auto!important}--><ol class="list-group list-group-numbered mt-3"><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">副标题</div>列表项的内容</div><span class="badge bg-primary rounded-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">副标题</div>列表项的内容</div><span class="badge bg-primary rounded-pill">14</span></li><li class="list-group-item d-flex justify-content-between align-items-start"><div class="ms-2 me-auto"><div class="fw-bold">副标题</div>列表项的内容</div><span class="badge bg-primary rounded-pill">14</span></li></ol></div>
</body>
自定义列表组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表组</title><script src="./dist/popper.min.js"></script><link rel="stylesheet" href="./dist/css/bootstrap.min.css"><script src="./dist/js/bootstrap.min.js"></script><style>img {width: 100px;} a {text-decoration: none;}</style>
</head>
<body><div class="container"><div class="list-group mt-3"><a class="list-group-item list-group-item-action" href="https://www.csdn.net/"><img src="./img/c++.jpg" alt=""> 第一个链接项<small>csdn</small></a><a class="list-group-item list-group-item-action" href="https://www.bilibili.com/"><img src="./img/java.jpg" alt=""> 第二个链接项<small>bilibili</small></a><a class="list-group-item list-group-item-action" href="https://www.baidu.com/"><img src="./img/php.jpg" alt=""> 第三个链接项<small>百度</small></a></div><div class="list-group list-group-horizontal mt-3"><a class="list-group-item list-group-item-action" href="https://www.csdn.net/"><img src="./img/c++.jpg" alt=""> 第一个链接项<small>csdn</small></a><a class="list-group-item list-group-item-action" href="https://www.bilibili.com/"><img src="./img/java.jpg" alt=""> 第二个链接项<small>bilibili</small></a><a class="list-group-item list-group-item-action" href="https://www.baidu.com/"><img src="./img/php.jpg" alt=""> 第三个链接项<small>百度</small></a></div></div>
</body>
</html>
复选框列表组
<body><div class="container"><ul class="list-group mt-3"><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value=""> 第一个复选框</li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value=""> 第二个复选框</li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value=""> 第三个复选框</li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value=""> 第四个复选框</li><li class="list-group-item"><input class="form-check-input me-1" type="checkbox" value=""> 第五个复选框</li></ul><div class="list-group mt-3"><label class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="">第一个复选框</label><label class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="">第二个复选框</label><label class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="">第三个复选框</label><label class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="">第四个复选框</label><label class="list-group-item"><input class="form-check-input me-1" type="checkbox" value="">第五个复选框</label></div></div>
</body>
上下文列表组
<body><div class="container"><ul class="list-group mt-3"><li class="list-group-item list-group-item-primary">第一项</li><li class="list-group-item list-group-item-secondary">第二项</li><li class="list-group-item list-group-item-success">第三项</li><li class="list-group-item list-group-item-warning">第四项</li><li class="list-group-item list-group-item-info">第五项</li><li class="list-group-item list-group-item-danger">第六项</li></ul><ul class="list-group list-group-horizontal mt-3"><li class="list-group-item list-group-item-action list-group-item-primary">第一项</li><li class="list-group-item list-group-item-action list-group-item-secondary">第二项</li><li class="list-group-item list-group-item-action list-group-item-success">第三项</li><li class="list-group-item list-group-item-action list-group-item-warning">第四项</li><li class="list-group-item list-group-item-action list-group-item-info">第五项</li><li class="list-group-item list-group-item-action list-group-item-danger">第六项</li></ul></div>
</body>
卡片
卡片样式
<body><div class="container"><div class="card mt-5"><div class="card-header">头部</div><div class="card-body bg-primary text-white">内容</div><div class="card-body bg-secondary text-white">内容</div><div class="card-body bg-success text-white">内容</div><div class="card-body bg-danger text-white">内容</div><div class="card-body bg-warning text-white">内容</div><div class="card-body bg-info text-white">内容</div><div class="card-body bg-dark text-white">内容</div><div class="card-body bg-light text-dark">内容</div><div class="card-footer">底部</div></div><div class="card border-success my-3" style="max-width: 18rem;"><div class="card-header bg-transparent border-success">页眉</div><div class="card-body text-success"><h5 class="card-title">内容</h5><p class="card-text">桃李不言下自成蹊</p></div><div class="card-footer bg-transparent border-success">页脚</div></div></div>
</body>
导航样式
<body>
<div class="container"><div class="card mt-5"><div class="card-body"><h3 class="">内容</h3><p class="card-text">桃李不言下自成蹊</p><a class="card-link" href="https://www.csdn.net/">CSDN</a><a class="card-link" href="https://www.bilibili.com/">bilibili</a></div></div><div class="card text-center"><div class="card-header"><!--nav 导航# 当前页面tabs 制表符nav-pills card-header-pills 药丸形--><ul class="nav nav-tabs card-header-tabs"><li class="nav-item"><a class="nav-link active" aria-current="true" href="#">积极</a></li><li class="nav-item"><a class="nav-link" href="https://www.csdn.net/">链接</a></li><li class="nav-item"><a class="nav-link disabled">禁用</a></li></ul></div><div class="card-body"><h5 class="card-title">内容</h5><p class="card-text">桃李不言下自成蹊</p><a href="https://www.csdn.net/" class="btn btn-primary">链接按钮</a></div></div></div>
</body>
图像叠加
- mx-0 { margin-left: 0; margin-right: 0; }
- my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }
<body>
<div class="container"><div class="card mt-5"><div class="card-body"><h3 class="card-title">内容</h3><img class="card-img-top card-img-bottom" src="./img/java.jpg" alt=""><p class="card-text">桃李不言下自成蹊</p><a class="card-link" href="https://www.csdn.net/">CSDN</a><a class="card-link" href="https://www.bilibili.com/">bilibili</a></div></div><div class="card my-5"><div class="card-body"><!--title 标题overlay 叠加--><img class="card-img-top card-img-bottom" src="./img/java.jpg" alt=""><div class="card-img-overlay text-white"><h3 class="card-title">内容</h3><p class="card-text">桃李不言下自成蹊</p><a class="card-link bg-primary text-white" href="https://www.csdn.net/">CSDN</a><a class="btn btn-primary" href="https://www.bilibili.com/">bilibili</a></div></div></div></div>
</body>
【bootstrap 入门】相关推荐
- Bootstrap入门（十三）组件7：导航条
Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...
- Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
- Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link hr ...
- bootstrap入门步骤
bootstrap入门 bootstrap其实是一个项目 或者叫做框架 是能制作自适应平台 一个页面可以自动根据显示设备的分辨率 调整显示方式 1.超大分辨率显示器1920 2.普通1024–1920 ...
- Bootstrap入门与简述
Bootstrap入门 一.概述 1.Bootstrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScr ...
- 前端学习之Bootstrap入门 网格系统
vscode前端常用插件推荐 https://www.cnblogs.com/karthuslorin/p/8577224.html VS code Debug for Chrome项目文件 http ...
- Bootstrap入门需掌握的知识点（一）
转载请务必注明出处: Bootstrap入门需掌握的知识点(一) Bootstrap Bootstrap中文网:http://www.bootcss.com/ 1.什么是 Bootstrap ? 官方 ...
- Bootstrap入门——情景文本颜色及背景颜色
Bootstrap入门打卡1天:学习网址https://v3.bootcss.com/ [全局CSS样式]-[辅助类]关于情景文本颜色和背景颜色的设置 其中,情景文本颜色可以分为六种 -- 1.文本颜 ...
最新文章
- 一顿“寄生虫大餐”，或能治好干净引来的免疫病
- 计算机学院杨洋,美国莱特州立大学吴志强教授访问计算机科学与技术学院
- 每日一皮：唯一的编码思想！
- tomcat server.xml文件的配置解析
- MFC开发IM-设置 static的背景色和字体色
- 数据结构学习笔记（树、二叉树）
- 安装Linux操作系统
- 如何使用pass语句？
- Android每日一记
- CSS的一些基本样式的简单介绍
- 初识dokuwiki
- 前端CSS - 相对定位,绝对定位,固定定位
- Atitit 教育学体系 教育学主要内容多语言，教学论，心理学，体育 高等教育学 职业技术教育学 教育史
- QComboBox样式表设置
- java中将汉字转拼音，解决pinyin4j多音节问题
- 使用浏览器传感器工具测试手机陀螺仪效果
- 何为五笔输入的最高境界?
- Java总结 - 抽象类与接口
- 《你的孤独，虽败犹荣》读后感
- Android OpenGL ES （十三） 视频播放器