Bootstrap 入門メモ (6) その他: アラート ボックス、プログレス バー、リスト グループ、パネルなど_html/css_WEB-ITnose

ブログの向こう側

残すところ最終日となり、2月も終わりです。前回のブログから丸一ヶ月が経ちましたが、この一ヶ月間、勉強に集中しなかったため、私の技術的な成長は再び停滞していたように感じます。家で酒を飲んで遊んで、丸一ヶ月インターンとして働いていたので、基本的に何も新しいことを学べなかったとも言えます。今日は 2 月の最終日です。あまり心配するのはやめましょう。2016 年 2 月 29 日 21:40 です。ブートストラップの基礎 次のステップ 新しいステージに入る時です！これからも前に進んでいきます、さあ！

サムネイル

実際、サムネイルは、タオバオの商品リスト、MOOC のコースリストなど、私たちが毎日使用する Web ページのいたるところで見ることができます。 , Bootstrap では、このような一般的なエフェクトを独自にモジュール コンポーネントに変換しており、Boosttrap サムネイルのデフォルトのデザインでは、最小限のタグのみでリンクされた画像を表示できます。

良好な表示効果を実現するには、Bootstrap のグリッド システムと連携する必要があります。 Bootstrap 中国語 Web サイトでは、次のようなサンプル コードを見ることができます。

<div class="container">    <div class="row">        <div class="col-xs-6 col-md-3">            <a href="#" class="thumbnail">                <img src="..." alt="...">                <!-- 此处应对图片做一些样式设置height: 180px;width: 100%; display: block;等 -->            </a>        </div>        ...    </div></div>

上記のコードの列を 3 回コピーします。ブラウザのサイズを見ると、グリッド システムのおかげでサムネイルが応答しやすくなっていることがわかります。これがグリッドシステムの効果です。では、.thumbnail にはどのような効果があるのでしょうか。

画像の周囲に境界線があり、境界線と画像の間に 4 ピクセルのパディングがあることがわかります。さらに、ブートストラップはサムネイル効果に人間味のあるホバー効果も提供します。

タイトル、説明、ボタンを追加する

もちろん、単にクリック可能な画像を表示するだけではありません。多くの場合、関連する説明やボタンなどを追加します。既存のサムネイルに基づいて、.caption コンテナを使用し、このコンテナに他のコンテンツを配置して、統一された表示効果を実現する必要があります。

<!-- 添加到上面代码中的.thumbnail容器内，a标签后 --><div class="caption">    <h2>说明文字</h2>    <p>这里是说明文字</p>    <button class="btn btn-info">按钮</button>    <button class="btn btn-success">按钮</button></div>

効果を見てください:

アラートボックス

実際には、 Web ページでは、さまざまなプロンプト メッセージが避けられません。たとえば、ログイン インターフェイスでは入力エラーが避けられないため、警告ボックスを使用してユーザーにエラー メッセージを表示する必要があります。 Bootstrap は、そのようなスタイル クラスのセットを提供します。

ブートストラップは、.alert を使用してアラート ボックスのサイズ、余白、その他のスタイルを制御し、次を使用します: success: .alert-success、information: .alert-info、warning: .alert-warning および error : .alert -danger、さまざまなシーンの色を表すスタイル クラスのセット。

<div class="alert alert-success" role="alert">恭喜您操作成功！</div><!-- ...等等 -->

閉じる

エフェクトの表示に加えて、Bootstrap js ファイルも導入すると。次に、アラート ボックスにいくつかのインタラクティブな効果を非常に簡単に作成することもできます。

<div class="alert alert-success alert-dismissable">    success操作成功    <button class="close" data-dismiss="alert">        <span class="glyphicon glyphicon-remove"></span>    </button></div>

次のように効果を確認できます: (後ろのアイコンをクリックしてプロンプト メッセージを閉じます)

これほど良い効果があるのですが、効果を得るにはどのような点に注意すればよいのでしょうか？主な手順は 3 つあります:

1. 通常の警告ボックス .alert に基づいて、 を追加します。アラート解除可能なクラス
2. アラート ボックス 閉じるボタン のスタイルを実装するために、ボタン タグに close クラスを追加します (閉じるボタンを実装するために Bootstrap に付属するアイコン アイコンを使用しました)
3. 閉じるボタンにカスタム属性 data-dismiss="alert" を追加します (ブートストラップはそのようなカスタム属性を使用し、JS 検出を使用して閉じる効果を実現します)

アラート ボックスlink

場合によっては、エラー メッセージに加えて、ユーザーが新しいページで問題を見つけてエラーに対処できるように、アラート ボックスにリンク アドレスも追加します。

ブートストラップは、主にリンク スタイル 強調表示、太字、および 色がそれに応じて濃くなります この効果を実現するために .alert-link クラスのみを使用します。 🎜>。 (さらに、上にマウスを移動すると下線が表示されます)

プログレス バー

Bootstrap フレームワークは、プログレス バーの基本スタイル、幅 100% の背景色、およびサブを提供します。 -コンテナの高さ 完成の進行状況を示すために点灯します。実際、このような進行状況バーを作成するのは非常に簡単です。通常、外側のコンテナには一定の幅があり、その子要素で幅が設定されます (親コンテナの幅の比率は次のとおりです)。 60%など）を選択し、同時に背景色を設定します。

ブートストラップもこの方法で実装されます。外側のコンテナーは .progress クラスを使用し、サブコンテナーは .progress-bar クラスを使用します (幅を設定することを忘れないでください)。

<div class="progress">       <div class="progress-bar" style="width:80%"></div></div>

同样它也提供了四个不同的情景颜色。 .progress-bar-info ..等，添加到 子容器 原有的类后即可

除了色彩，还可以使进度条的变为条纹的，只需要将 progress-striped 添加到原有的 父容器 类后，它同样具有彩色效果。更进一步的是，若在其后再添加一个 .active 类，可以实现动态的条纹进度条。（必须两个同时使用，使用css3动画实现）我们来试试：

<div class="progress progress-striped active">    <div class="progress-bar progress-bar-danger" style="width:80%"></div></div><!-- .... -->

我们还可以在一个进度条内，将不同状态的进度条放置在一起，水平排列，形成叠加进度条，这个就自己试试吧！^_^

带标签的显示条

使用很简单，只需要在子容器中添加相应的数字就可以了，不过下面这段代码会有什么效果呢？不妨也自己去试试吧！(在源码中搜索 aria-valuenow="0" 可看到原因)

<div class="progress">    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>

媒体对象

媒体对象一般包括以下几个部分：

1. 媒体对像的容器：常使用 .media 类名表示，用来容纳媒体对象的所有内容
2. 媒体对像的对象：常使用 .media-object 表示，就是媒体对象中的对象，常常是图片
3. 媒体对象的主体：常使用 .media-body 表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
4. 媒体对象的标题：常使用 .media-heading 表示，就是用来描述对象的一个标题，此部分可选
5. .pull-left 或者 .pull-right 来控制媒体对象中的对象浮动方式。(如图片在左或者在右)

那么我们可以看到的结构如下：

<div class="media">    <a class="pull-left" href="#">        <img class="media-object" src=".." alt="...">    </a>    <div class="media-body">        <h4 class="media-heading">Bootstrap</h4>        <div>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</div>    </div></div>

可以实现最普通的图片在左，标题与介绍文字在右的媒体对象组。

我们在论坛中常常能看到和Bootstrap中文官网媒体对象组模块类似的阶梯状媒体对象，它是怎么实现的呢？

其实很简单，我们只需要在上一级的 .media-body 容器最后添加新的额媒体对象容器 .media 就可以实现这样的阶梯效果

除了这样的阶梯形式，我们还可以在论坛评论系统中看到，评论是平铺着下来的，也就是媒体对象列表。

我们只需要将原来的 .media 放在 .media-list 容器中就可以实现，不过既然都说了是列表，那我们还是直接使用ul>li的排列方式吧:

<ul class="media-list">    <li class="media">…</li>    <li class="media">…</li>    <li class="media">…</li></ul>

Bootstrap同样帮我们清除了，媒体对象列表中的ul>li的默认样式，使展示更急美观

列表组

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。它主要包括两个部分：

1. .list-group ：列表组容器， 常用的是ul元素 ，当然也可以是ol或者div元素
2. .list-group-item ：列表项， 常用的是li元素 ，当然也可以是div元素

如：

带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在 .list-group-item 中添加徽章组件 .badge ：

<ul class="list-group">    <li class="list-group-item">玩转Bootstrap  <span class="badge">5</span></li>    <li class="list-group-item">基础Bootstrap的网页开发  <span class="badge">12</span></li></ul>

可以实现笑效果如下：

如果在列表组中，我们希望列表项是链接的话，Bootstrap为我们提供了两种方案：

1. 直接将链接置于li .list-group-item 容器内，它会有链接下划线的存在
2. 将ul.list-group>li.list-group-item的结构换成div.list-group>a.list-group-item，此时与默认的列表组显示无异(emmet会吧？那就能理解我的代码的意思…)

自定义列表组

除了上面默认的列表组之外，为了更清晰的展示内容，Bootstrap实现了自定义列表组，主要是新增了两个类：

1. .list-group-item-heading ：用来定义列表项头部样式
2. .list-group-item-text ：用来定义列表项主要内容

结构如下编写：

<div class="list-group">    <a href="##" class="list-group-item">        <h4 class="list-group-item-heading">图解CSS3</h4>        <p class="list-group-item-text">...</p>    </a>    <a href="##" class="list-group-item">        <h4 class="list-group-item-heading">Sass中国</h4>        <p class="list-group-item-text">...</p>    </a></div>

列表项的状态设置

和其他的组件一样，列表组也两个状态效果：

• .active ：表示当前状态
• .disabled ：表示禁用状态

只需要在相应的列表项上添加。 class="list-group-item active"> ，主要对于该项的背景颜色进行高亮，以及其中的 徽章 进行了 高亮处理

禁用状态，只是添加了一个灰色的背景色，以及文字的暗色处理

除了上面的两个最常用的状态之外，Bootstrap为我们的列表组也提供了不同的情景颜色，只需要在列表项中添加 .list-group-item-danger 这一系列的类。

面板

同样作为一个新增的组件，基础面板非常简单，就是一个div容器运用了 .panel 样式，产生一个具有边框的文本显示块。由于 .panel 不控制主题颜色，所以在 .panel 的基础上增加一个控制颜色的主题 .panel-default ，另外在里面添加了一个 .div.panel-body 来放置面板主体内容：

<div class="panel panel-default">    <!-- panel-default就是那一系列的情景类，设置不同的可以设置不同的颜色 -->    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div></div>

带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

1. .panel-heading ：用来设置面板头部样式
2. .panel-footer ：用来设置面板尾部样式

<div class="panel panel-default">    <!-- 这里对于不同的情景颜色，面板头的颜色改变十分明显 -->    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">…</div>    <div class="panel-footer">作者：大漠</div></div>

面板中嵌套表格

其实面板作为一个用于处理，别的组件完成不了的情况的组件，一般情况下可以把面板理解为一个区域，所以在使用面板的时候，都会在 .panel-body 放置需要的内容，可能是 图片、表格或者列表等 。

如果在面板中嵌套表格，只需要将编写好的表格直接放置在面板中即可，不过有着如下两种形式：

<div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">…</div>    <!-- 这里是放在panel-body后面，实际上我们还可以将table放在panel-body里面 -->    <table class="table table-bordered">…</table>    <div class="panel-footer">作者：大漠</div></div>

两个效果最大的差异是：

1. 放在 .panel-body 内 的表格，实际上就是简单的嵌套，设置了一些padding值等。
2. 房在 .panel-body 后 的表格，会与面板融合在一起，与面板相接的地方，不会有着边框的展示，而是直接展示面板的边框

在面板中嵌套列表组时，同样是这样的两个差异

到这里我们的Bootstrap基础理论入门就结束了，实际上花了很多时间都是在理论上，并且中间还停歇了很长的时间。下一步我们需要做的就是在实战中去不断掌握它，了解它的细节，帮助我们能够缩短搭建时间、快速的搭建网站，并且让其在不同的终端下达到一个非常好的显示效果。

现在各个方面还是有很多不足，坚持学习，继续改进，加油！我的目标可是web全栈呢！

2016-03-01 01:40