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>
    
    
    尝试一下