Bootstrap基础03——常用组件

前端 Bootstrap
前端
发布日期:   2020-06-23
文章字数:   5.2k

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

<p class="h1">文本尝试（Text Try)</p>
<p class="h2">文本尝试（Text Try)</p>
<p class="h3">文本尝试（Text Try)</p>
<p class="h4">文本尝试（Text Try)</p>
<p class="h5">文本尝试（Text Try)</p>
<p class="h6">文本尝试（Text Try)</p>

Bootstrap对默认的样式也做了优化。

这里的这两种效果是完全一样的看起来，不过还是建议使用

的这种方式，因为比如百度抓取标题关键词的时候是只会抓取h1里面的而不会抓取p标签里面的。

image-20200329125808326

副标题

1
2
3
4
<p class="h1">
    文本尝试 
    <small class="text-muted">（Text Try)</small>
</p>

这里small就是副标题，加上一个text-muted类让它的颜色改变，显得更像副标题。

中心内容

1
2
3
4
5
6
7
8
<p>
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

lead类定义一个中心文本，也就是比较显眼的文本。可以看到下面加了lead的和上面的不同。

image-20200329125818689

语义化标签

比如这种，有很多。不再一一列举。

1
2
3
<p>
    <code>Java</code>是一杯咖啡。
</p>

image-20200329125824850

图片

略缩图

1
2
3
4
5
<body style="padding: 100px">

    <!--thumbnail略缩图-->
	<img src="img/miaonei.jpg" alt="喵内噶" class="img-thumbnail">

这里给body加了个边距，然后显示出来。

PS: 翻译 thumbnin：“指甲，极小的东西”

  • img-thumbnain：有圆角，边框，响应式。
    image-20200329125859545

这里Bootstrap里的响应式和普通的%宽度还不太一样。Bootstrap的类的响应式是只有屏幕小到一定程度之后才触发；而%的响应式是随时都会变，屏幕变大一点图片就变大一点。

普通图片

1
<img src="img/halu.jpg" alt="哈鲁酱" class="img-fluid">

就只是比略缩图少了点东西，其他一样。自适应。

image-20200329125908698

左右浮动

1
2
<img src="img/miaonei.jpg" alt="喵内噶" class="img-thumbnail float-left">
<img src="img/halu.jpg" alt="哈鲁酱" class="img-fluid float-right">

image-20200329125918214

不同屏幕

1
2
3
4
5
6
<picture>
    <source srcset="img/abi.jpg"  media="(min-width: 1000px)" class="img-fluid">
    <source srcset="img/halu.jpg"  media="(min-width: 800px)" class="img-fluid">
    <source srcset="img/miaonei.jpg" media="(min-width: 500px)" class="img-fluid">
    <img src="img/nopower.jpg" alt="这是当浏览器不支持picture标签时显示的图片" class="img-fluid">
</picture>

h5标签，不同屏幕下显示不同的图片。

注意source的属性是srcset，Bootstrap中文站的代码少了个set。

常用组件

警告提示框（Alert）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="alert alert-primary" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
    This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
    This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
    This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
    This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
    This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
    This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
    This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

  • alert：代表这是个警告提示框，里面规定了位置、边框等东西
  • alert-xxxx：进一步的规定了带alert的div的颜色、背景、字体样式
  • role=“alert”：H5语义化标签，告诉搜索引擎这个div的作用是alert提示框，用途是帮助残疾人，尤其是需要依靠屏幕阅读器和不能使用鼠标的用户
  • alert-link：alert提示框里面的超链接，对alert进行了颜色和字体的适配

面包屑导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

这个面包屑导航就是类似于那种小说阅读目录，或者更适应的例子是文件夹的路径那种。

image-20200329125940603

按钮

按钮样式

1
2
3
4
5
6
7
8
9
10
<!--按钮-->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

按钮的多种样式

  • btn：按钮的基本样式，去除原生html里的各种效果
  • btn-xxx：重置按钮的颜色、样式
  • type=“button”：这里因为本来就是button标签所以说不加也行，主要是为了下面的

image-20200329125948552

按钮标签（多种按钮）

1
2
3
4
5
6
<!--多种按钮-->
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

这里表明按钮可以有多种标签，不只是

文章作者: SongX64
文章链接: https://SongX64.github.io/2020/06/23/Bootstrap%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 SongX64 !
前端 Bootstrap
赏
  目录