この記事では主に、Bootstrap フレームワークに基づいた初心者向けの入門チュートリアルを提供します (推奨)。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして、皆さんが boostrap についてより明確に理解できることを願っています。
Bootstrap 初心者チュートリアル
Bootstrap の紹介
Twitter 発の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。
【関連動画おすすめ: ブートストラップチュートリアル 】
1. グリッドシステム
グリッドシステムの仕組み:
"Row" は .container (固定幅) または .container -fluid (100) に含まれている必要があります% width) を使用して、適切な配置とパディングを与えます。
「行」を通して横方向に「列」の集合を作成します。
コンテンツは「column」内に配置する必要があり、「column」のみが row の直接の子要素になることができます
.row および .col-xs-4 と同様、グリッドをすばやく作成するために使用できる事前定義されたクラス。ブートストラップ ソース コードで定義されたミックスインは、列間のギャップ (ガッター) を .row 要素に設定することによって、セマンティック レイアウトを作成するためにも使用できます。 .container 要素のパディングセットをオフセットすると、パディングに含まれる「列」も間接的にオフセットされます。
次の例ではマージンが強調表示されているためです。たとえば、3 つの同じ幅の列は 3 つの .col-xs-4 を使用して作成できます。
「行」に 12 を超える「列」が含まれる場合。 , 「列」が配置されている要素は、全体として新しい行に配置されます。
グリッドクラスは、分割点サイズ以上の画面幅を持つデバイスに適しています。小画面デバイスの場合は、画面幅がブレークポイント サイズ以上のデバイスの要素に .col-md-* ラスター クラスを適用し、小画面デバイスのラスター クラスをオーバーライドします。要素上の .col-lg- * 存在しません。大画面デバイスにも影響します。
メディア クエリは、条件が満たされた場合にのみ適用される非常に複雑な「条件付き CSS ルール」です。
Bootstrap のメディア クエリを使用すると、ビューポート サイズに基づいてコンテンツを移動、表示、非表示にすることができます。
/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
場合によっては、LESS ファイルで次のメディア クエリが使用されます。 max-width は、CSS の影響をより狭い範囲の画面サイズに制限するためにメディア クエリ コードにも含まれています
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
メディア クエリには 2 つの部分があり、最初にデバイス仕様、次にサイズ ルールがあります。 、次のルールが設定されています:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
min-width を持つすべてのデバイス: @screen-sm-min、画面の幅が @screen-sm-max より小さい場合、
グリッド パラメーター
を実行します。
次の表は、Bootstrap のグリッド システムがさまざまな画面デバイスでどのように動作するかを詳しく示しています。
次の表は、ブートストラップ グリッド システムが複数のデバイス間でどのように機能するかをまとめたものです:
レスポンシブ列リセット
次の例には 4 つのグリッドが含まれていますが、小型デバイスでは参照できませんグリッドが表示される場所を決定します。
この問題を解決するには、以下の例に示すように、.clearfix クラスとレスポンシブ ツールを使用して解決できます。
<p class="container">
<p class="row" >
<p class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</p>
<p class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</p>
<p class="clearfix visible-xs"></p>
<p class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</p>
<p class="col-xs-6 col-sm-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</p>
</p>
</p>
列のオフセット
オフセットは、より専門的なレイアウトに便利な機能です。列のためのスペースを増やすために使用できます。たとえば、.col-xs-* クラスはオフセットをサポートしていませんが、空のセルを使用するだけでその効果を実現できます。
大画面ディスプレイでオフセットを使用するには、.col-md-offset-* クラスを使用します。これらのクラスは、列の左マージンを * 列分増やします。* の範囲は 1 ~ 11 です。
以下の例では、
..
があり、.col-md-offset-3 クラスを使用してこの p を中央に配置します。
<p class="container">
<h1>Hello, world!</h1>
<p class="row" >
<p class="col-xs-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</p>
</p>
</p>
ネストされた列
为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。
在下面的实例中,布局有两个列,第二列被分为两行四个盒子。
<p class="container">
<h1>Hello, world!</h1>
<p class="row">
<p class="col-md-3" >
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</p>
<p class="col-md-9" >
<h4>第二列 - 分为四个盒子</h4>
<p class="row">
<p class="col-md-6" >
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</p>
<p class="col-md-6" >
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</p>
</p>
<p class="row">
<p class="col-md-6" >
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</p>
<p class="col-md-6" >
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</p>
</p>
</p>
</p>
</p>
列排序
Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
<p class="container">
<h1>Hello, world!</h1>
<p class="row">
<p>
排序前
</p>
<p class="col-md-4" >
我在左边
</p>
<p class="col-md-8" >
我在右边
</p>
</p>
<br>
<p class="row">
<p>
排序后
</p>
<p class="col-md-4 col-md-push-8" >
我在左边
</p>
<p class="col-md-8 col-md-pull-4" >
我在右边
</p>
</p>
</p>
二、Bootstrap 排版
HTML 中的所有标题标签,
到 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 ,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示:
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
页面主体:Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予
元素和所有段落元素。另外,
(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
列表:
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表:有序列表是指以数字或其他有序字符开头的列表。
无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表:在这种类型的列表中,每个列表项可以包含
和 元素。 代表 定义术语,就像字典,这是被定义的属于(或短语)。接着, 是 的描述。您可以使用 class dl-horizontal 把 行中的属于与描述并排显示。
下面的实例演示了这些类型的列表:
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
下表提供了 Bootstrap 更多排版类的实例:
三、Bootstrap 代码
Bootstrap 允许您以两种方式显示代码:
第一种是 标签。如果您想要内联显示代码,那么您应该使用 标签。
For example, <code><section></code> should be wrapped as inline.
第二种是
标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre class="brush:php;toolbar:false"> 标签。</p>
<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><p>Sample text here...</p>
还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。
四、Bootstrap 表格
Bootstrap 支持的一些表格元素:
用于表格的样式
用于表格的行或者单元格
基本实例
为任意
标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
条纹表格
通过添加 .table-striped class,您将在
内的行上看到条纹,如下面的实例所示:
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
带边框的表格
通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:
<table class="table table-bordered">
<caption>边框表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
悬停表格
通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:
<table class="table table-hover">
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
精简表格
通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
<table class="table table-condensed">
<caption>精简表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th></tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td></tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td></tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td></tr>
</tbody>
</table>
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
<table class="table">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
响应式表格
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
<p class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr>
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
</p>
五、Bootstrap 表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
向父
元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
<form class="form-inline" role="form">
<p class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</p>
<p class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</p>
<p class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</p>
<button type="submit" class="btn btn-default">提交</button>
</form>
水平表单
水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
向父
元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的
中。
向标签添加 class .control-label。
<form class="form-horizontal" role="form">
<p class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<p class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</p>
</p>
<p class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<p class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<p class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</p>
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</p>
</p>
</form>
六、Bootstrap 按钮
可作为按钮使用的标签或元素
为 、 或 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
以下样式可用于, , 或 元素上:
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
下表列出了获得各种大小按钮的 class:
<p>
<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
<button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">默认大小的原始按钮</button>
<button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
<button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
<button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。
激活状态
按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
下表列出了让按钮元素和锚元素呈激活状态的 class:
禁用状态
当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class:
按钮标签
您可以在 、 或 元素上使用按钮 class。但是建议您在 元素上使用按钮 class,避免跨浏览器的不一致性问题。
下面的实例演示了这点:
<a class="btn btn-default" href="#" rel="external nofollow" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">
七、Bootstrap 图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
图片形状
通过为 元素添加以下相应的类,可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
八、Bootstrap 辅助类
文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:
背景
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:
其他
一些实例:
关闭图标
使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。
<p>关闭图标实例
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。
<span class="caret"></span>
让内容块居中
为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。
<p class="center-block">...</p>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
显示或隐藏内容
.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题,就像 quick floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。
.hide 类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是说,元素的 display 属性不被改变,并且这个元素仍然能够影响文档流的排布。
<p class="show">...</p>
<p class="hidden">...</p>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
九、Bootstrap 响应式实用工具
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
打印类
下表列出了打印类。使用这些切换打印内容。
<p class="container" >
<p class="row visible-on">
<p class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</p>
<p class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</p>
<p class="clearfix visible-xs"></p>
<p class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</p>
<p class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</p>
</p>
</p>
相关推荐:
ブートストラップ フレームワークを HTML ページにロードしてチュートリアルを使用する方法
ブートストラップ フレームワーク関連コースのまとめ
ブートストラップ フレームワークの使用方法ブートストラップ フレームワークを使用するための 5 つの推奨ビデオ チュートリアル
以上がBootstrapフレームワークの基本説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明: この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。