亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄 搜尋
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類(lèi) Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
文字

Bootstrap 警告（Alerts）

本章將講解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用戶(hù)提供了一種定義消息樣式的方式。它們?yōu)榈湫偷挠脩?hù)操作提供了上下文信息反饋。

您可以為警告框添加一個(gè)可選的關(guān)閉按鈕。為了創(chuàng)建一個(gè)內(nèi)聯(lián)的可取消的警告框，請(qǐng)使用 警告（Alerts） jQuery 插件。

您可以通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來(lái)添加一個(gè)基本的警告框。下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?警告（Alerts）</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="alert?alert-success">成功！很好地完成了提交。</div>
<div?class="alert?alert-info">信息！請(qǐng)注意這個(gè)信息。</div>
<div?class="alert?alert-warning">警告！請(qǐng)不要提交。</div>
<div?class="alert?alert-danger">錯(cuò)誤！請(qǐng)進(jìn)行一些更改。</div>


</body>
</html>

結(jié)果如下所示：

警告（Alerts）

可取消的警告（Dismissal Alerts）

創(chuàng)建一個(gè)可取消的警告（Dismissal Alert）步驟如下：

  • 通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來(lái)添加一個(gè)基本的警告框。
  • 同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable。
  • 添加一個(gè)關(guān)閉按鈕。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?可取消的警告（Dismissal?Alerts）</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="alert?alert-success?alert-dismissable">
???<button?type="button"?class="close"?data-dismiss="alert"?
??????aria-hidden="true">
??????&times;
???</button>
???成功！很好地完成了提交。
</div>
<div?class="alert?alert-info?alert-dismissable">
???<button?type="button"?class="close"?data-dismiss="alert"?
??????aria-hidden="true">
??????&times;
???</button>
???信息！請(qǐng)注意這個(gè)信息。
</div>
<div?class="alert?alert-warning?alert-dismissable">
???<button?type="button"?class="close"?data-dismiss="alert"?
??????aria-hidden="true">
??????&times;
???</button>
???警告！請(qǐng)不要提交。
</div>
<div?class="alert?alert-danger?alert-dismissable">
???<button?type="button"?class="close"?data-dismiss="alert"?
??????aria-hidden="true">
??????&times;
???</button>
???錯(cuò)誤！請(qǐng)進(jìn)行一些更改。
</div>


</body>
</html>

請(qǐng)確保使用帶有 data-dismiss="alert" data 屬性的 <button> 元素。

結(jié)果如下所示：

可取消的警告（Dismissal Alerts）

警告（Alerts）中的鏈接

在警告（Alerts）中創(chuàng)建鏈接的步驟如下：

  • 通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來(lái)添加一個(gè)基本的警告框。
  • 使用 .alert-link 實(shí)體類(lèi)來(lái)快速提供帶有匹配顏色的鏈接。
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?警告（Alerts）中的鏈接</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="alert?alert-success">
???<a?href="#"?class="alert-link">成功！很好地完成了提交。</a>
</div>
<div?class="alert?alert-info">
???<a?href="#"?class="alert-link">信息！請(qǐng)注意這個(gè)信息。</a>
</div>
<div?class="alert?alert-warning">
???<a?href="#"?class="alert-link">警告！請(qǐng)不要提交。</a>
</div>
<div?class="alert?alert-danger">
???<a?href="#"?class="alert-link">錯(cuò)誤！請(qǐng)進(jìn)行一些更改。</a>
</div>


</body>
</html>

結(jié)果如下所示：

警告（Alerts）中的鏈接
上一篇： 下一篇：