Bootstarp 4 入门之基础样式

Overflow

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

定位

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

阴影

描述

<div class="shadow-none p-3 mb-5 bg-light rounded">无阴影</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-white rounded">一般阴影</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">大阴影</div>

尺寸

  • w-{siez}
  • h-{size}
  • max-width:100% .mw-100
    <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
    <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
    <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
    <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
    <div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
    <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
    <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
    <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
    <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
    <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
    </div>

    间隔

  • m -对于设置的类 margin
  • p -对于设置的类 padding
  • t-对于设置margin-toppadding-top
  • b-对于设置margin-bottompadding-bottom
  • l-对于设置margin-leftpadding-left
  • r-对于设置margin-rightpadding-right
  • x-对于同时设置*-left*-right
  • y-对于同时设置*-top*-bottom
  • 空白-用于在元素的所有4侧设置a marginpadding4的

其中大小是以下之一:

  • 0-对于消除marginpadding通过将其设置为的类0
  • 1- (默认情况下)的类时,设置marginpadding$spacer * .25
  • 2- (默认情况下)的类时,设置marginpadding$spacer * .5
  • 3- (默认情况下)的类时,设置marginpadding$spacer
  • 4- (默认情况下)的类时,设置marginpadding$spacer * 1.5
  • 5- (默认情况下)的类时,设置marginpadding$spacer * 3
  • auto-对于将设置margin为自动的类

负边距 px-{属性}-{大小}

文本

文本对齐

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

文字折行和溢出 .text-wrap

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

单词中断

通过使用.text-break 将长字符串设置为 overflow-wrap: break-word

文本转换

<p class="text-lowercase">转为小写的文本。</p>
<p class="text-uppercase">转为大写的文本。</p>
<p class="text-capitalize">转为首字母大写的文本。</p>

字体粗细和斜体

描述

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

重置颜色.text-reset

去除下划线

<a href="#" class="text-decoration-none">不带下划线的链接</a>

垂直对齐

<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>

可见性

<div class="visible">...</div>
<div class="invisible">...</div>

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。