bootstrap三

2020.12.12 14:50

01.内容----文字排版

1.标题
通过给元素添加class="h1~h6"达到和<h1>~<h6>一样的效果

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<br>
<br>
<br>
<br>

<p class="h1">bootstrap</p>
<p class="h2">bootstrap</p>
<p class="h3">bootstrap</p>
<p class="h4">bootstrap</p>
<p class="h5">bootstrap</p>
<p class="h6">bootstrap</p>

通过给p标签添加标题的类来达到标题的效果，但不建议这样，因为只是能达到和标题一样的效果，并不是真正的标题

2.子标题:
在标题标签里添加<small></small>来达成
<h2>h2. Bootstrap heading <small>子标题</small></h2>

给子标题添加样式:text-muted
<h2>h2. Bootstrap heading <small class='text-muted'>子标题</small></h2>

3.leader：class="lead"让某段文字突出显示
<p>正常显示</p>
<p class='lead'>突出显示</p>

4.语义化标签:<code></code>
<p><code>JavaScript</code></p>

02.图片和picture标签

• 缩略图:img-thumbnail 默认由边框
  
• 响应式图片 .img-fluid 可赋得响应式特性，图片大小会随着父元素大小同步缩放
• 图像对齐处理 使用 浮动定义规范
  <img src="cat.jpg" alt="" class="img-thumbnail float-left"> 左对齐
  <img src="cat.jpg" alt="" class="img-fluid rounded float-right"> 右对齐
  
• 圆角 round

HTML5标准提供了一个全新的<picture> 元素，它可以为<img>指定多个<source>定义，请确保在<img>标签里使用使用.img-*CSS样式进行定义绑定，而不是仅仅认为引用了 <img>就达成了

<pictrue>元素可实现图片在不同屏幕下的针对性响应式

让每个档次的屏幕显示不同图片:

​<picture>
    <source srcset="cat1.jpg"  media="(min-width: 1000px)" >
    <source srcset="cat2.jpg"  media="(min-width: 800px)">
    <source srcset="cat3.jpg"  media="(min-width: 500px)">
    <img src="s1.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

• 大屏幕下显示一张图
  

• 中屏幕下显示一张图
  

• 超小屏幕下显示一张图
  

03.常用组件----警告提示框(Alerts)

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

04.常用组件----徽章(Badge)

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<s