3.7Bootstrap学习组件篇之大屏幕介绍、页面标题、缩略图、警示框、Well

痛定思痛。 2022-08-27 03:49 109阅读 0赞

**1、大屏幕介绍**

**轻量，灵活的可选组件，扩展整个视角，展示您站点上的关键内容。要让大屏幕介绍是屏幕宽度，请别把它包括在`.container`。**

<div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>

**![11043539-389cf1b43c72484db71963f9a64f41fc.png][]**

**如果需要让大屏幕介绍（jumbotron）占据全部宽度并且去掉圆角，只需将其放到所有`.container`外面，并在其内部添加一个`.container`。**

![复制代码][copycode.gif]

<div class="jumbotron">
        <div class="container">
          <h1>Hello, world!</h1>
          <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
          <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>
    </div>

![复制代码][copycode.gif]

**2、页面标题**

**简单的`h1`样式，可以适当地分出空间且分开页面中的章节。像其它组件一样，它可以使用`h1`的默认`small`元素（添加了一些额外的样式）。**

**<div class="page-header"><h1>Example page header <small>Subtext for header</small></h1></d**

**3、缩略图**

**用缩略图组件扩展Bootstrap的[栅格系统][Link 1]，可以简单地显示栅格样式的图像，视频，文本，等等。**

### 默认案例 ###

Boostrap的缩略图的默认设计仅需最小的标记，就能展示带链接的图片。

代码：

预览：

![Center][]

页面缩放，会2x2排列

### 定制内容 ###

用一点点额外的标记，可以把任何种类的HTML内容像标题，段落或按钮加入缩略图。

代码：

<div class="row">
    			<div class="col-md-4 col-sm-6">
    				<div class="thumbnail">
    					<img src="http://placehold.it/300/f00/fff" alt="" />
    					<div class="caption">
    						<h3>标题</h3>
    						<p>这里可以放置描述信息或者替他的东西</p>
    						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
    							<a href="#" class="btn btn-default" role="button">按钮</a>
    						</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-md-4 col-sm-6">
    				<div class="thumbnail">
    					<img src="http://placehold.it/300/f00/fff" alt="" />
    					<div class="caption">
    						<h3>标题</h3>
    						<p>这里可以放置描述信息或者替他的东西</p>
    						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
    							<a href="#" class="btn btn-default" role="button">按钮</a>
    						</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-md-4 col-sm-6">
    				<div class="thumbnail">
    					<img src="http://placehold.it/300/f00/fff" alt="" />
    					<div class="caption">
    						<h3>标题</h3>
    						<p>这里可以放置描述信息或者替他的东西</p>
    						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
    							<a href="#" class="btn btn-default" role="button">按钮</a>
    						</p>
    					</div>
    				</div>
    			</div>
    			
    			<div class="col-md-4 col-sm-6">
    				<div class="thumbnail">
    					<img src="http://placehold.it/300/f00/fff" alt="" />
    					<div class="caption">
    						<h3>标题</h3>
    						<p>这里可以放置描述信息或者替他的东西</p>
    						<p><a href="#" class="btn btn-primary" role="button">按钮</a>
    							<a href="#" class="btn btn-default" role="button">按钮</a>
    						</p>
    					</div>
    				</div>
    			</div>
    		</div>

预览： ![Center 1][]

**4、警示框**

**为典型的用户动作提供少数可用且灵活的反馈消息。要用关闭功能，请使用[jQuery警告框插件][jQuery].**

## 案例 ##

为了得到基本的警告信息，把任何文本和可选的关闭按钮放入`.alert`和四种有意义的类中（例如，`.alert-success`）。

#### 没有默认类 ####

警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种内容类。从成功，消息，警告或危险中任选其一。

**代码：**

<h1 class="page-header">警示框</h1>
    		<div class="alert alert-success">
    		做得好！你成功阅读了这个重要的弹出信息！
    		</div>
    		<div class="alert alert-info">
    		小心！这个弹出框需要你的注意！但是不是非常重要。
    		</div>
    		<div class="alert alert-warning">
    		警告！你最好检查一下。你看起来不怎么好。
    		</div>
    		<div class="alert alert-danger">
    		危险！
    		</div>

预览：

**![Center 2][]**

## 可关闭的警告框 ##

可以用一个可选的`.alert-dismissable`和关闭按钮。

× Warning! Best check yo self, you're not looking too good.

<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 带关闭按钮的警示框 </div>预览：

#### 确定在所有设备上的正确行为 ####

一定要给`data-dismiss="alert"`属性用上`<button>`。

用`.alert-link`工具类，可以快速提供在任何警告框中相符的颜色。

![复制代码][copycode.gif]

<div class="alert alert-success">Well done! 
            <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
        <div class="alert alert-info">Well done! 
            <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
        <div class="alert alert-warning">Well done! 
            <a href="#" class="alert-link">You successfully read this important alert message.</a></div>
        <div class="alert alert-danger">Well done!
            <a href="#" class="alert-link">You successfully read this important alert message.</a></div>

![复制代码][copycode.gif]

![11051224-de7266a3dd1348dd9494d33fc893a220.png][]

**5、Well**

### 默认效果 ###

把Well用在元素上，能有嵌入(inset)的的简单效果。

**![11051536-e865081eaef243e69c4564defa193984.png][]**

### 可选类 ###

用这两种可选修饰类，可以控制内补（padding）和圆角。

[11043539-389cf1b43c72484db71963f9a64f41fc.png]: /images/20220824/16b41cbb5f65459faa567e885e344f96.png
[copycode.gif]: /images/20220824/41a121a04531464cafa1edf3476df743.png
[Link 1]: http://v3.bootcss.com/css/#grid
[Center]: /images/20220824/9f917cd2390940f999f657c826470e30.png
[Center 1]: /images/20220824/1727b7b33ee34806ac9913ed733a3e5d.png
[jQuery]: http://v3.bootcss.com/javascript/#alerts
[Center 2]: /images/20220824/baee6fd6975743fb88519ea97a7d8017.png
[11051224-de7266a3dd1348dd9494d33fc893a220.png]: /images/20220824/a2f3ae5df9934b0bbba8cfec006aa736.png
[11051536-e865081eaef243e69c4564defa193984.png]: /images/20220824/296db6c1beb043058d66ec924c86547f.png