<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>案例7</title>
<link href="bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-5.3.2-dist/js/bootstrap.bundle.min.js"></script>
<style>
.bi {
vertical-align: -.125em;
fill: currentColor
}
.text-small {
font-size: 85%
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
<path fill-rule="evenodd"
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd"
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</symbol>
</svg>
<header>
<div class="px-3 py-2 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/"
class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
<use xlink:href="#bootstrap"/>
</svg>
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#home"/>
</svg>
主页
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#speedometer2"/>
</svg>
控制面板
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#table"/>
</svg>
订单
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#grid"/>
</svg>
产品
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#people-circle"/>
</svg>
客户
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
<input type="search" class="form-control" placeholder="搜索..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-light text-dark me-2">登录</button>
<button type="button" class="btn btn-primary">注册</button>
</div>
</div>
</div>
</header>
</body>
</html>
23.2 Bootstrap 卡片
183 浏览量
2023-10-03
22:46:30
上传
评论
收藏 2.08MB ZIP 举报
23.2 Bootstrap 卡片 （103个子文件） 
bootstrap.css 274KB bootstrap.rtl.css 274KB bootstrap.rtl.min.css 228KB bootstrap.min.css 227KB bootstrap-utilities.css 105KB bootstrap-utilities.rtl.css 105KB bootstrap-utilities.min.css 83KB bootstrap-utilities.rtl.min.css 83KB bootstrap-grid.rtl.css 69KB bootstrap-grid.css 69KB bootstrap-grid.rtl.min.css 51KB bootstrap-grid.min.css 51KB bootstrap-reboot.css 12KB bootstrap-reboot.rtl.css 12KB bootstrap-reboot.rtl.min.css 10KB bootstrap-reboot.min.css 10KB Bootstrap 卡片.eddx 455KB .gitignore 184B
44. case_7.html 7KB 15. case_4.html 6KB 14. case_3.html 6KB 31. navigation_bar_background_color.html 4KB 42. case_5.html 4KB 41. case_4.html 4KB 13. case_2.html 3KB 40. case_3.html 3KB 9. menu_pop_up_direction.html 3KB 43. case_6.html 3KB 16. case_5.html 3KB 39. case_2.html 3KB 38. case_1.html 2KB 18. accordion.html 2KB 11. button_groups_have_inline_drop_down_menus.html 2KB 30. navigation_bar_alignment.html 2KB 12. case_1.html 2KB 21. navigation_alignment.html 2KB 35. inline_forms.html 2KB 25. navigation_monospace.html 2KB 32. navigation_bar_flags.html 1KB 1. card_background_color.html 1KB 27. dynamic_tab.html 1KB 3. card_picture.html 1KB 33. collapse_the_navigation_bar.html 1KB 34. navigation_bar_dropdown.html 1KB 26. navigation_dropdown.html 1KB 7. drop_down_header_title.html 1KB 10. dropdown_menu_text_item.html 1KB 37. fixed_navigation_bar.html 1010B 17. collapse_style.html 942B 4. card_background.html 905B 5. dropdown_style.html 901B 24. capsule_navigation.html 888B 20. navigation_status.html 885B 8. drop_down_option_status.html 873B 29. navigation_bar_status.html 870B 36. navbar_text.html 863B 28. navigation_bar_style.html 854B 23. tab_style.html 850B 22. vertical_navigation.html 843B 6. dropdown_divider.html 832B 19. navigation_style.html 831B 2. title_text_link.html 712B 0. card.html 594B Bootstarp3.iml 291B bootstrap.bundle.js 203KB bootstrap.js 142KB bootstrap.esm.js 133KB bootstrap.bundle.min.js 79KB bootstrap.esm.min.js 72KB bootstrap.min.js 59KB package.json 224B bootstrap.css.map 663KB bootstrap.rtl.css.map 663KB bootstrap.min.css.map 575KB bootstrap.rtl.min.css.map 575KB bootstrap.bundle.js.map 434KB bootstrap.bundle.min.js.map 324KB bootstrap.js.map 299KB bootstrap.esm.js.map 298KB bootstrap-utilities.css.map 261KB bootstrap-utilities.rtl.css.map 261KB bootstrap.esm.min.js.map 217KB bootstrap.min.js.map 215KB bootstrap-grid.rtl.css.map 198KB bootstrap-grid.css.map 198KB bootstrap-utilities.min.css.map 176KB bootstrap-utilities.rtl.min.css.map 176KB bootstrap-reboot.rtl.css.map 126KB bootstrap-reboot.css.map 126KB bootstrap-grid.rtl.min.css.map 113KB bootstrap-grid.min.css.map 113KB bootstrap-reboot.rtl.min.css.map 62KB bootstrap-reboot.min.css.map 50KB 23.2 Bootstrap 卡片.md 112KB
img3.png 82KB avatar.png 8KB img2.png 2KB img.png 1KB workspace.xml 5KB Project_Default.xml 992B共 103 条
- 1
- 2
资源评论
开局签到Python基础
- 粉丝: 587
- 资源: 61
最新资源
- 基于matlab LVQ神经网络的预测-人脸朝向识别源代码+详细教程
- 医院电子病历管理系统 JAVA+Spring+SpringMVC+MyBatis
- 基于matlab LVQ神经网络的分类-乳腺肿瘤诊断源代码+详细教程
- 【C#/.NET/.NET Core学习、工作、面试指南】记录、收集和总结
- matlab 基于MIV的神经网络变量筛选-基于BP神经网络的变量筛选源代码+详细教程
- 基于matlab 概率神经网络的分类预测-基于PNN的变压器故障诊断源代码+详细教程
- IMG_2779.PNG
- 基于matlab Elman神经网络的数据预测-电力负荷预测模型研究源代码+详细教程
- 架构师软考知识点整理2
- 基于matlab SOM神经网络的数据分类-柴油机故障诊断源代码+详细教程
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
