コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル Bootstarp_javascript スキルで CSS を使用する方法

Bootstarp_javascript スキルで CSS を使用する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:15 PM
css

ブートストラップは一部の HTML5 要素と CSS プロパティを使用するため、HTML5 ドキュメント タイプを使用する必要があります。 

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>
ログイン後にコピー

Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチ スクリーンのスケーリングを確保するには、以下に示すように、Web ページの先頭にビューポート メタ タグを追加する必要があります。 

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
          initial-scale=1.0, //缩放程度
          maximum-scale=1.0, //最大缩放级别（可选）
          user-scalable=no">//禁止页面缩放（可选）
ログイン後にコピー

ブートストラップは、Normalize を使用してブラウザ間の一貫性を確立します。 Normalize.css は、HTML 要素のデフォルト スタイルのブラウザ間での一貫性を向上させる小さな CSS ファイルです。

レイアウトについて

Bootstrap は、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割される、応答性の高いモバイルファーストの流体グリッド システムを提供します。

img 要素には img-sensitive が使用されます

ページ上のコンテンツをラップするために使用されるコンテナ要素

  • 行はコンテナーに配置する必要があり、水平方向の列グループを作成するために使用されます。
  • .row や .col-xs-4 などの事前定義されたグリッド クラスを使用して、グリッド レイアウトをすばやく作成できます。

  • 行と列は互いにネストでき、ネスト後の適応はデバイスの幅ではなく親要素に基づきます
  • 3 つの等しい列を作成するには、3 つのcol-xs-4 を使用するか、12 列の場合は 12 つのcol-xs-1 を使用します。 
<div class="container">
 <div class="row">
  <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
ログイン後にコピー
  • メディアクエリは非常に派手な「条件付き CSS ルール」です。特定の指定された条件に基づいて一部の CSS でのみ機能します。これらの条件が満たされる場合、対応するスタイルが適用されます。

@media (最小幅: @screen-sm-min) および (最大幅: @screen-sm-max) { ... }
//min-width: @screen-sm-min のすべてのデバイスについて、画面の幅が @screen-sm-max より小さい場合、何らかの処理が実行されます。

組版について

  • 本文について
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红
ログイン後にコピー

Bootstrap は、 要素のスタイルをテキストの下部に表示される破線の境界線として定義し、その上にマウスを置くと完全なテキストが表示されます (< にテキストを追加する場合)。 abbr>タイトル属性）。テキストのフォント サイズを小さくするには、 に .initialism を追加します。 

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
ログイン後にコピー

  • タグを使用すると、Web ページに連絡先情報を表示できます。
  • タグを引用符として使用します
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
ログイン後にコピー
  • list-unstyled はスタイルなしのリスト ul に使用され、list-inline は水平リスト ul に使用されます
  • 事前スクロールにより事前スクロール可能になります
  • はコードをインラインで表示します。
     は複数行のコードを表示します</strong></span><br />
  </li>
</ul>
<p><strong>フォームについて</strong></p>
<p style="text-align: center"><img src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793115393.png&#63;201611793123"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></p>
<p style="text-align: center"><img src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793141588.png&#63;201611793156"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></p>
<p>任意の .table を .table 応答クラスでラップすると、小さなデバイス (768 ピクセル未満) に合わせてテーブルを水平にスクロールさせることができます。幅 768 ピクセルを超える大きなデバイスで表示しても、違いはわかりません。 <br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>
<div 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>
  </tbody>
 </table>
</div>
    ログイン後にコピー

フォームについて

  • フォームに role="form" 属性を追加すると、Bootstrap の基本的なフォーム構造が適用されます。
  • クラス .form-group を使用して、ラベルとコントロールを
    に配置します。これは最適な間隔を得るために必要です。
  • すべてのテキスト要素 、