【Bootstrap】7日間徹底Bootstrap (3) CSSlayout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

【Bootstrap】7日間徹底Bootstrap (3) CSSlayout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:37 AM

Bootstrap の 3 つのコアコンテンツの基礎は、基本的な CSS レイアウト構文です。これには、基本的なタイポグラフィ、コード、テーブル、フォーム、ボタン、画像、ヘルパークラス、および応答性の高いユーティリティが含まれています。

このセクションの内容:

概要

基本的な組版

コード

テーブル

フォーム

ボタン

画像

補助スタイル

概要

HTML5ドキュメントタイプ

ありがとうBootstrap には HTML5 固有の HTML 要素と CSS 属性が使用されるため、Bootstrap を使用する場合、すべての HTML ファイルは先頭にある HTML5 DOCTYPE 属性を参照する必要があります

<!DOCTYPE html><html lang="en">    ...</html>

ログイン後にコピー

Mobile first

モバイルデバイスのブラウザでは、userscalable= の追加を通じてビューポートメタタグに no を指定すると、ズーム機能が無効になります。

レスポンシブ画像

画像のサイズを適応的に拡大縮小するために、Bootstrap はバージョン 3.x で .img レスポンシブスタイルを追加しました。これにより、画像の maxwidth: 100% と height: が基本的に設定されます。属性

タイプセットとリンク

ブートストラップは、Web ページのいくつかの基本的なグローバルスタイル、タイポグラフィー、およびリンクスタイルを設定します

body 要素のマージン設定をキャンセルし、デフォルトの 0、margin:0 に変更します。
body 要素の背景色を白に設定します (background-color: #ffffff)。
レイアウトと組版の観点から、フォント、フォントサイズ、行間隔に使用される標準値

中央揃えコンテナ

ページ (または要素) を中央に表示するには、単に外部コンテナの .container スタイル。グリッドシステムは外部コンテナのサイズ設定に依存するため、コンテナスタイルにはデフォルトで max-width 属性があり、グリッドシステムの最大幅を制限します

基本的なタイポグラフィ

タイトル

bs は伝統的ですタイトル要素 h1 ～ h6 は、表示効果がすべてのブラウザで同じになるように標準スタイルを再定義します。

bs は、.h1 スタイルなどの h タイプのスタイルも提供します。h1 タグスタイルと比較すると、margin-top と margin-bottom が定義されていない点が異なります。

Text

bs は、グローバルに設定されるフォントサイズです。

small、strong、em、cite

コンテナ内のテキスト配置: text-left、text-center、text-right、text-justify

省略形: abbr (マウスオーバーでタイトル値が表示されます)

リスト

bs は、通常リスト、順序付きリスト、無意味リスト、インラインリスト、説明リスト、水平説明リストの 6 つの形式のリストを提供します。

通常のリスト (ul)、順序付きリスト (ol)、スタイルなしリスト (list-unstyled)、説明リスト、水平説明リストは単なる最適化であり、効果は明らかではありません。

インラインリスト (list-inline) は、リスト項目を水平方向に表示します。同様の水平メニュー効果

コード

コードスタイルは通常、コードを引用符で囲む必要がある場所に表示されます

code 要素を使用して 1 行のインラインコードを含める必要があります

要素は、コンテンツがユーザーのキーボード入力である必要があることを示すため、通常は入力効果に設定されます。

pre 要素は通常、大きなコードを表示し、元の形式が変更されないようにするために使用されます。。さらに、 pre 要素に .pre-scrollable スタイルを適用すると、領域の最大高さを 340 ピクセルに制御し、y 方向にスクロールできます

Table

bs は 1 つの基本的なを提供します。 table スタイル、4 つの 3 つの追加スタイル (.table-striped、.table-border、.table-hover、.table-condensed)、および応答性の高いレイアウトをサポートする .table-sensitive コンテナースタイル。

.table-striped スタイル。交互の行と背景色の設定を追加します。

.table-border は、テーブル内のすべてのセルに 1 ピクセル幅の境界線を提供します

.table-hover マウスを上に移動したときに対応する部分の色が変わると、非常に動的に見え、ハイライト機能があります

.table -condensed Compact table、つまり、テーブルの表示が通常のテーブルよりわずかにコンパクトです。実装原理は、セルの内側のマージンを減らすことです。

.tableresponse スタイルは、.table スタイルの外側にラップすることで作成できます。小さな画面デバイス (768 ピクセル未満) で水平にスクロールする応答性の高いテーブル

bs は、tr の背景色を制御するために、テーブルの tr 要素に 5 つの基本的なカラースタイル (アクティブな成功情報、警告、危険) を提供します。

Form

BS フレームワークのコアコンテンツであるフォームは、豊富なスタイル (基本、インライン、水平) を提供します。

まずは2つの基本スタイルを理解しましょう

form-control: 100%に設定します

form-group: 各コントロールが確実に表示されるように下マージンを設定します。

select、input、textarea 要素に .form-control スタイルを適用すると、表示される幅は 100% になり、プレースホルダーの色は #999999 に設定されます

インラインフォーム

有的时候，我们可能需要一个所有控件都在一行中的表单，只需要在普通的form元素上应用一个.form-inline样式

横向表单

与内联表单的使用方式不太一样，其不能在form元素上简单应用一个.form-horizontal样式。

由于.form-horizontal样式改变了.form-group的行为，将其表现得像栅格系统中的行（row）一样，因此就无需再使用.row样式了。

表单控件

对现有HTML5语法下的input都进行了支持（如 type为text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel和color 的元素）

input元素，必须声明type类型，否则可能会引起其他问题

select元素，多行选择设置mulitiple属性为multiple

textarea元素，定义了rows数字即可定义大文本框的高度，定义cols可以定义大文本框的宽度

checkbox和radio元素，是input元素里两个非常特殊的type，由于经常搭配文字显示，bs做了标准显示

    <div class="radio">        <label><input name="opt" type="radio" />ON</label>    </div>    <div class="radio">        <label><input name="opt" type="radio" />OFF</label>    </div>    <div class="checkbox">        <label><input type="checkbox"/>Swing</label>    </div>    <div class="checkbox">        <label><input type="checkbox" />Runing</label>    </div>

ログイン後にコピー

当checkbox和radio内容很少时,需要横向显示的时候，可以用checkbox-inline和radio-inline

控件状态

bs提供了3种状态的样式可供使用，分别是：焦点状态（默认提供）、禁用状态、验证提示状态。

使用方式和普通的disabled一样，只需要在禁用元素上使用 disabled属性即可。

fieldset如果使用了disabled属性时，内部的控件也将会禁用。

在填写表单的时候，经常要提示用户其输入内容是否合法，bs提供了.has-warning、.has-error、.has-success三种样式。

（父容器上的has-feedback样式用于设置定位方式；小图标元素上的form-control-feedback样式用于设置图标的显示大小）

<div class="form-group has-success has-feedback">                <label class="control-label" for="name">User Name:</label>                <input type="text" class="form-control" id="name" />                <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>

ログイン後にコピー

控件大小

bs提供了两个样式用于设置稍大或者稍小的input输入框，分别是：.input-lg和.input-sm

按钮

按钮样式，定义了标准5种颜色、1个默认和一个link按钮。

按钮大小，定义3种.btn-lg、.btn-sm、.btnxs。.btn-block样式可以充满父元素，不随文字符宽度变化。

多标签，支持button a input3个标签。为了兼容性，非常建议使用button。

支持active和disabled状态。

图像

提供了3种风格效果,在img标签上应用.img-rounded、.img-circle、.img-thumbnail样式即可

使用过程中需要注意，上述样式没有控制图片的显示大小，所以需要额外应用样式或者限制父元素大小来控制图片显示大小.

IE8及以下版本不支持.img-rounded和.img-circle样式特效。

辅助样式

文本样式，bs提供了1个灰色，和5个基本标准样式的颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-success）、信息蓝（text-info）、警告黄（textwarning）、危险红（text-danger）

文本背景样式，bs还提供了上面的5种文本颜色样式对应（muted样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄（bg-warning）、危险红（bg-danger）

辅助图标

关闭图标（右浮动）

        <button class="close">&times;</button>        <a class="close">&times;</a>

ログイン後にコピー

向下箭头

<span class="caret"></span>

ログイン後にコピー

浮动

对于内容浮动，一般会有3种需求（左浮动、右浮动、居中对齐），分别对应了pull-left、pull-right和center-block样式

响应式样式

利用媒体查询的特性，对特定的情况进行隐藏或显示的设置。

.visible-开头的样式表示仅在某尺寸时显示，其他都隐藏；而.hidden样式则表示仅在某尺寸时隐藏，其他都显示。

如：

提供了分别对浏览器和打印机进行隐藏和显示的设置　　visible-print和hidden-print

只在大屏幕下显示　　visble-lg

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7737

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。