BootStrap学習(1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

BootStrap学習(1)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

1. Bootstrap の概要

BootStrap は、2011 年 8 月に Twitter によって開始されたフロントエンドフレームワークです。BootStrap は、Html、Css、および Javascript に基づいて、Web を迅速に開発するために使用できます。現在はストリーミングフレームのフロントエンドです。

Bootstrap の利点は次のとおりです:

モバイルファースト

: Bootstrap 3 以降、フレームワークにはライブラリ全体にモバイルファーストスタイルが含まれています。 2.

ブラウザのサポート

: すべての主要なブラウザはブートストラップをサポートしています。 3.

使いやすい

: Bootstrap は HTML と CSS の基本的な知識に基づいているため、学習と使用が簡単です。 4.

レスポンシブデザイン

: Bootstrap のレスポンシブ CSS は、デスクトップ、タブレット、携帯電話に適応できます。 2. BootStrap をダウンロードします

最新バージョンの Bootstrap は http://getbootstrap.com/ からダウンロードできます。このリンクをクリックすると、次のようなページが表示されます:

2 つのボタンが表示されます:

ブートストラップのダウンロード: ブートストラップをダウンロードします。このボタンをクリックすると、Bootstrap CSS、JavaScript、およびフォントのプリコンパイルされた圧縮バージョンをダウンロードできます。ドキュメントとオリジナルのソースコードファイルは含まれません。

ソースをダウンロード: ソースコードをダウンロードします。このボタンをクリックすると、最新の Bootstrap LESS および JavaScript ソースコードを直接入手できます。これには、上記の圧縮コンテンツとソースコードが含まれています

Download Bootstrap をダウンロードするだけです。

次に、このファイル構造は次のとおりです

その中にいくつかの CSS、JS、および Glyphicons フォントが含まれていることがわかりました。

3. HTML の概要

1. ダウンロードした BootStrap ファイルをプロジェクトに配置します。

2. BootStrap を参照する HTML テンプレート:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="../js/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" />    <script src="../js/jquery-1.9.1.min.js"></script>    <script src="../js/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script></head><body>    </body></html>

ここで、.. に

jquery.js

、

bootstrap.min.j s

が含まれていることがわかります。

bootstrap.min.css ファイル。Bootstrap を使用して通常の HTML ファイルをテンプレートに変換するために使用されます。 注: BootStrap の JavaScript プラグインは jQuery を導入する必要があるため、別の Jquery.js をダウンロードして bootstrap.min.js の前に置く必要があります。 4. BootStrap CDN アクセラレーションポイントを使用する

BootStrap をダウンロードせずに、一部の BootStrap アクセラレーションポイントを直接使用することができます。CND アクセラレーションポイントを使用する利点は、アクセスの高速化、より明らかなアクセラレーション効果、速度と帯域幅の制限なし、永続的に無料であることです。

個人の好みに応じて CDN アクセラレーションポイントを選択できます。ここでは Baidu の静的リソースライブラリ (http://cdn.code.baidu.com/) のブートストラップリソースが使用されます

HTML テンプレートは次のようになります。

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <!-- 新 Bootstrap 核心 CSS 文件 -->  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>   <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body>    </body></html>

注: CDN を使用するには、外部ネットワークが必要です。

5. 最初の example_font アイコン

上記で BootStrap をダウンロードしてインストールすると、そのディレクトリ構造について学習しました

dist フォルダー内の fonts フォルダーにフォントアイコンがあり、次のものが含まれています。ファイルが見つかりました:

glyphicons-halflings-normal.eot

glyphicons-halflings-normal.svg

glyphicons-halflings-normal.ttf

glyphicons-halflings-regulator.woff

関連CSS ルールこれらは、dist フォルダー内の css フォルダー内の bootstrap.css および bootstrap-min.css ファイルに書き込まれます。

Bootstrap には、フォント形式で 200 を超えるグリフがバンドルされています。これは、BootStrap フォントアイコンのリストです。 http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

CSS ルールの説明。

すごいです

つまり、font-face ルールは実際にグリフィコンが見つかるフォントファミリーと位置を宣言します。

.glyphicon クラスは、上から 1px の相対位置オフセットを宣言し、インラインブロックとしてレンダリングし、フォントを宣言し、通常どおり font-style と font-weight を指定し、行の高さを 1 に設定します。さらに、ブラウザ間の一貫性を保つために、-webkit-font-smoothing: antialiased および -moz-osx-font-smoothing: greyscale を使用します。

使用法

アイコンを使用するには、以下のコードを使用するだけです。

@font-face {  font-family: 'Glyphicons Halflings';  src: url('../fonts/glyphicons-halflings-regular.eot');  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}.glyphicon {  position: relative;  top: 1px;  display: inline-block;  font-family: 'Glyphicons Halflings';  -webkit-font-smoothing: antialiased;  font-style: normal;  font-weight: normal;  line-height: 1;  -moz-osx-font-smoothing: grayscale;}

<span class="glyphicon glyphicon-search"></span><br />在一个<span></span>标签中加入.class样式即可。<br />

Effect:

このうち、ユーザー内の btn-lg btn-sm btn-xs はサイズを制御する 3 つのスタイルです。

カスタムサイズと色

フォントサイズを増減することで、アイコンを大きくしたり小さくしたりすることができます。

リーリー

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: color:#f00;">  <span class="glyphicon glyphicon-user"></span> 用户</button>

声明

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

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

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

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

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Mac版

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

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、