上一节:

  Bootstrap 实例

  • Bootstrap 边框

    使用 border 类可以添加或删除元素的边框： 
    <span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
    尝试一下
    输出结果如下：
               

    边框颜色

    下面示例演示了边框添加颜色的类名： 
    <span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
    尝试一下
    输出结果如下：
                     

    边框圆角

    下面示例演示了使用圆角类将圆角添加到元素：： 
    <span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
    尝试一下
    输出结果如下：
                     

  • Bootstrap 浮动

    使用 .float-right 类将元素浮动到右侧，或使用 .float-left 将元素浮动到左侧，然后使用 .clearfix 类将浮动元素清除： 
    <div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>
    尝试一下
    根据响应的浮动类别 .float-*-left | right 其中*是 sm（>= 576px），md（>= 768px），lg（>= 992px）或 xl（>= 1200px）： 
    <div class="float-sm-right">在小屏幕或更宽的屏幕上向右浮动</div>
<div class="float-md-right">在中等或更大尺寸的屏幕上向右浮动</div>
<div class="float-lg-right">在大屏幕或更宽的屏幕上向右浮动</div>
<div class="float-xl-right">在超大屏幕或更宽的屏幕上向右浮动</div>
<div class="float-none">不浮动</div>
    尝试一下

  • Bootstrap 宽和高

    使用 .w- * 类（.w-25，.w-50，.w-75，.w-100，.mw-100）设置元素的宽度： 
    <div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>
    尝试一下
    输出结果如下：
    宽度 25%
    宽度 50%
    宽度 75%
    宽度 100%
    最大宽度 100%
    使用 .h- * 类（.h-25，.h-50，.h-75，.h-100，.mh-100）设置元素的高度： 
    <div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
<div>
    尝试一下
    输出结果如下：
    高度 25%
    高度 50%
    高度 75%
    高度 100%
    最大高度 100%

  • Bootstrap 边距

    Bootstrap 具有广泛的响应边距和填充实用程序类。
    它们适用于所有断点：xs(<= 576px)，sm(>=576px)，md(>=768px)，lg(>=992px) 或 xl(>=1200px)。
    这些类以以下格式使用：xs 的 {property} {sides--size} 和 sm，md，lg 和 xl 的 {property} {sides- {breakpoint}-{size}。
    其中属性是：
    • m-设置边距/li>
    • p-设置填充
    其中边距是以下：
    • t-设置margin-top或padding-top
    • b-设置margin-bottom或padding-bottom
    • l-设置margin-left或padding-left
    • r-设置margin-right或padding-right
    • x-设置padding-left和padding-right或margin-left和margin-right
    • y-设置padding-top和padding-bottom或margin-top和margin-bottom
    • blank-在元素的所有4个面上设置margin和padding
    其中大小是以下：
    • 0-将边距或填充设置为0
    • 1-将空白或填充设置为.25rem（如果font-size为16px，则为4px）
    • 2-将空白或填充设置为.5rem（如果font-size为16px，则为8px）
    • 3-将边距或填充设置为1rem（如果font-size为16px，则为16px）
    • 4-将边距或填充设置为1.5rem（如果font-size为16px，则为24px）
    • 5-将边距或填充设置为3rem（如果font-size为16px，则为48px）
    • auto-将边距或填充设置为自动
    注意：边距也可以为负数，方法是在尺寸前面添加 "n"：
    • n1-将页边距设置为-.25rem（如果font-size为16px，则为-4px）
    • n2-将页边距设置为-.5rem（如果font-size为16px，则为-8px）
    • n3-将页边距设置为-1rem（如果font-size为16px，则为-16px）
    • n4-将边距设置为-1.5rem（如果font-size为16px，则为-24px）
    • n5-将边距设置为-3rem（如果font-size为16px，则为-48px）
    <div class="pt-4 bg-warning">我只有一个顶部填充（1.5rem = 24px）</div>
<div class="p-5 bg-success">我到处都有填充（3rem = 48px）</div>
<div class="m-5 pb-5 bg-info">我到处都有边距（3rem = 48px）和底部填充（3rem = 48px）</div>
    尝试一下
    输出结果如下：
    我只有一个顶部填充（1.5rem = 24px）
    我到处都有填充（3rem = 48px）
    我到处都有边距（3rem = 48px）和底部填充（3rem = 48px）

  • Bootstrap 阴影

    使用.shadow- 类向元素添加阴影： 
    <div class="shadow-none p-4 mb-4 bg-light">无阴影</div>
<div class="shadow-sm p-4 mb-4 bg-white">小阴影</div>
<div class="shadow p-4 mb-4 bg-white">默认的阴影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大阴影</div>
    尝试一下
    输出结果如下：
    无阴影
    小阴影
    默认的阴影
    大阴影

  • Bootstrap 对齐方式

    使用.align-class 更改元素的对齐方式（仅适用于inline，inline-block，inline-table和table单元元素）： 
    <span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
    尝试一下
    使用 .mx-auto 类将元素居中（添加margin-left和margin-right：auto）： 
    <div class="mx-auto bg-warning" style="width:150px">Centered</div>
    尝试一下

  • Bootstrap 响应式嵌入

    根据父级的宽度创建自适应视频或幻灯片嵌入。
    将 .embed-response-item 添加到父元素中具有 .embed-sensitive 和您选择的宽高比的任何嵌入元素（例如<iframe>或<video>）： 
    <div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
    尝试一下

  • Bootstrap 可见度

    使用 .visible 或 .invisible 类控制元素的可见性。
    注意：这些类不会更改CSS显示值；它们仅添加可见性：可见或可见性：隐藏： 
    <div class="visible">我是visible</div>
<div class="invisible">我是invisible</div>
    尝试一下
    使用 .sr-only 类可在除屏幕阅读器之外的所有设备上隐藏元素： 
    <span class="sr-only">除屏幕阅读器外，我将在所有屏幕上隐藏</span>
    尝试一下

  • 相关页面

上一节: