Bootstarp_javascript スキルで CSS を使用する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

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 は、要素のスタイルをテキストの下部に表示される破線の境界線として定義し、その上にマウスを置くと完全なテキストが表示されます (タイトル属性）。テキストのフォントサイズを小さくするには、に .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 に使用されます
事前スクロールにより事前スクロール可能になります
はコードをインラインで表示します。<pre class="brush:php;toolbar:false"> は複数行のコードを表示します</pre>

フォームについて

任意の .table を .table 応答クラスでラップすると、小さなデバイス (768 ピクセル未満) に合わせてテーブルを水平にスクロールさせることができます。幅 768 ピクセルを超える大きなデバイスで表示しても、違いはわかりません。

<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 を使用して、ラベルとコントロールを
に配置します。これは最適な間隔を得るために必要です。
すべてのテキスト要素、および <select> にクラス .form-control を追加します。 </select>

<input type="text" class="form-control" placeholder="文本输入"/> <textarea class="form-control" rows="3"></textarea> <label for="name">可多选的选择列表</label> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>

在form加上类calss=form-inline，那么表单元素就会变成内联的

在form加上类class=form-horizontal，那么表单元素就会变成水平的

1）设置表单控件padding和margin值
2）改变“form-group”的表现形式，类似于网格系统的“row”。
3）向标签添加 class .control-label。

复选框和单选框

1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

当您需要在一个水平表单内的表单标签后放置纯文本时，请在
上使用 class .form-control-static。

禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性

对
添加 disabled 属性来禁用
内的所有控件。

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

.input-lg 和.input-sm可以改变输入框的高度样式

help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。

<input class="form-control" type="text" placeholder=""> <span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

关于按钮

<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>

按钮的大小

<p> <button type="button" class="btn btn-primary btn-lg"> 大的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary"> 默认大小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-sm"> 小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-xs"> 特别小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block"> 块级的原始按钮 </button> </p>

class为active表示激活按钮

class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。

关于图片

关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：

.img-rounded 圆角图片

.img-circle 圆形图片

.img-thumbnail 缩略图功能

关于其它样式类

.pull-left左浮动

.pull-right右浮动

center-block内容居中

.clearfix清除浮动

.caret显示下拉式

.close关闭图标

关于不同设备

以上就是Bootstarp中CSS的使用方法，希望大家会喜欢。

声明

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

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles