小风车吱呀转

摘要： 内容扩展管理器——卡片 卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合 一、卡片样式 1.先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容 <div class="card" style="width:300px;"> <div class="ca 阅读全文

摘要： 按钮和按钮组 一、按钮样式 1.使用.btn 和.btn-*实现按钮的预设样式；.btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用 <button type="button" class="btn btn-primary">Bootstrap4.x</button> 阅读全文

摘要： 徽章样式和面包屑导航 一、徽章样式 1. 使用.badge 设置徽章基础样式，并使用.badge-success 等设置徽章颜色 <h1>Bootstrap<span class="badge badge-secondary">4.x</span></h1> <h2>Bootstrap<span c 阅读全文

摘要： 警告框 一、警告框样式 1. 使用.alert 设置警告框基础样式，并使用.alert-success 设置警告框颜色；在使用了警告框的元素内部设置超链接.alert-link，会搭配相应的颜色 <div class="alert alert-success">Bootstrap4.x<a href 阅读全文

摘要： Flex弹性布局 Flex弹性布局属性详解：https://www.cnblogs.com/hellocd/p/10443237.html。 一、Flex样式 1. 使用.d-flex 和.d-inline-flex 实现开启 flex 布局样式，同时也支持响应式的媒体查询：.d-*-flex <d 阅读全文

摘要： 边框和颜色 一、边框样式 需要2张背景底色不同的图片。 1.使用.border 给元素增加相应的边框，默认是淡灰色； 如果颜色太淡，可以使用.border-*设置想要的场景，比如.border-success； .border-*，包含：primary、secondary、success、dange 阅读全文

摘要： 表格样式 1.使用.table 给表格设置一个基类，这是表格的基本样式 <table class="table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>性别</th> <th>总成绩</th> </tr> </thead> <tbody> <tr> <t 阅读全文

摘要： 代码与图文样式 一．代码样式 1. 使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号 <code> &lt;div&gt; </code> 2.使用<pre>标签元素，配合<code>实现代码块的效果，可以在代码区域设置.pre-scrollable 样式，实现固定区域滚动 阅读全文

摘要： 内容排版 Bootstrap 的内容排版，分为标题类、文本类和列表类三块。 一、标题类 1.使用<h1>~<h6>可以创建不同尺寸的标题文字；如果是使用其它元素标签，比如<p>或<div>，调用.h1~6 同样实现大标题 <h1>Bootstrap</h1> <h2>Bootstrap</h2> < 阅读全文

摘要： 栅格对齐与排列 一、栅格对齐 1.栅格系统中的行，可以进行垂直对齐操作。 样式(作用域行间) 居顶(默认) .align-items-start 居中 .align-items-center 居底 .align-items-end 2.栅格系统中的列来说，也有三种垂直居中的方法 样式(作用域列间) 阅读全文