ブートストラップフロントエンドフレームワークの利用例をまとめます

1. ブートストラップ組版

グローバルスタイルstyle.css:

1. 本文のマージンステートメントを削除します

2. 本文の背景色を白に設定します

3. 基本的なフォント、フォントサイズ、線を設定します。植字用の高さ

4. グローバル リンクの色を設定します。リンクが「:hover」状態の場合にのみ下線スタイルが表示されます。

Title h1-h6

HTML のすべてのタイトル タグは、

に設定されます。

が使えます。さらに、インライン属性のテキストにタイトル スタイルを与えるために、.h1 ～ .h6 クラス セレクターが提供されています。

1. margin-topとmargin-bottomの値をリセットします

2. h1〜h3のリセット値はすべて20pxです。h4〜h6のリセット値はすべて10px

です。すべてのタイトル 行の高さは 1.1 (つまり、フォント サイズの 1.1 倍)、テキストの色とフォントは親要素の色とフォントを継承します

4 さまざまなレベルのタイトルのフォント サイズを修正しました (h1=)。 36px、h2=30px、h3= 24px、h4=18px、h5=14px、h6=12px

タイトルには タグを含めることも、サブタイトルをマークするために使用できる .small クラスの要素を指定することもできます。

<h2>Bootstrap heading <small>Secondary Text</small></h2>

ブートストラップ見出し二次テキスト

pタグ

(段落)要素も下余白10pxに設定されています。

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

.lead クラスを追加すると、段落を強調表示できます。

<br/>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque petatibus et magnis dis parturient montes, nascetur idiculus mus. vehicula.<br/>

内容を強調するラベル

一般に段落タグと一緒に使用

関連クラスの強調

text-muted：  提示，使用浅灰色（#999）text-primary：主要，使用蓝色（#428bca）text-success：成功，使用浅绿色(#3c763d)text-info：   通知信息，使用浅蓝色（#31708f）text-warning：警告，使用黄色（#8a6d3b）text-danger： 危险，使用褐色（#a94442）

テキスト配置スタイル

text-left：   左对齐
text-center： 居中对齐
text-right：  右对齐
text-justify：两端对齐

リスト

1 , ul, ol デシーケンス:

class=“list-unstyled“

2, ul, ol 水平配置 ; (縦のリストを横のリストに変更し、箇条書き(数字)を削除し、横の表示を維持します)

class=“list-inline”

3. 横のリストをdlします(画面が768pxより大きい場合は、クラス名「.dl-horizo​​ntal」を追加します) 「 」は水平方向の定義リスト効果のみあります）

class=“dl-horizontal”

Pictures

使用方法は非常に簡単で、対応するクラス名を

タグに追加するだけです
img-sensitive: レスポンシブピクチャー、主にレスポンシブデザイン向け

img-rounded：   圆角图片
img-circle：    圆形图片
img-thumbnail： 缩略图片

自分で追加して、対応する効果を確認してください~~~

ブートストラップ アイコン

ブートストラップ フレームワークでは、約 200 種類の異なるアイコン画像も提供されており、これらのアイコンはすべて CSS3 の @font-face 属性を使用してフォントに一致しますアイコン効果を実現します。

任意の行レベルの要素を使用できます。通常は、span タグがアイコン コンテナとして使用されます

ブートストラップ Web サイトで確認できます;span>

使用法は非常に簡単です。アイコンをドロップするだけです。英語をコピーしてクラスに貼り付けるだけです:

<span class="glyphicon glyphicon-ok"></span>

2. Bootstrap-table

基本的な例

<table class="table"></table>

は

ストライプ テーブルは :nth-child CSS セレクターに依存して実装されており、この機能は Internet Explorer 8 ではサポートされていません。

枠線付きテーブル

.table-bordered クラスを追加して、テーブルとその中の各セルに枠線を追加します。

Mouseover

.table-hover クラスを追加すると、 の各行がマウスオーバー状態に応答するようにできます。

圧縮テーブル

.table-condensed クラスを追加すると、テーブルをよりコンパクトにすることができ、セル内のパディングが半分になります。

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色.success    标识成功或积极的动作.info        标识普通的提示信息或动作.warning    标识警告或需要用户注意.danger        标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

<form role="form">告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单</form><form role="button">告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性</form>

不要将表单组合输入框组混合使用，建议将输入框组嵌套到表单组中使用。

<form>
      <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
       </div>
       <div class="form-group">
             <label for="exampleInputPassword1">Password</label>
             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
       <div class="form-group">
          <label for="exampleInputFile">File input</label>
             <input type="file" id="exampleInputFile">
           <p class="help-block">Example block-level help text here.</p>
     </div>
       <div class="checkbox">
             <label>
               <input type="checkbox"> Check me out
             </label>
      </div>
       <button type="submit" class="btn btn-default">Submit</button>
</form>

多个控件可以排列在同一行:

<form class="form-inline">
      <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
     <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

单选和多选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

多选框：

<div class="checkbox">      <label>          <input type="checkbox" value="">
        Option one is this and that—be sure to include why it&#39;s great       </label></div>
<div class="checkbox disabled">      <label><input type="checkbox" value="" disabled>
            Option two is disabled      </label></div>

单选框：

<div class="radio">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
</div>
<div class="radio disabled">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            Option three is disabled
      </label>
</div>

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

参考博文：bootstrap框架怎么用?

以上がブートストラップフロントエンドフレームワークの利用例をまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。