ブートストラップ公式 Web サイトのコンポーネントを直接使用できますか?-ブートストラップのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

ブートストラップ公式 Web サイトのコンポーネントを直接使用できますか?

angryTom

Jul 29, 2019 am 09:49 AM

bootstrap

ブートストラップ公式 Web サイトのコンポーネントを直接使用できますか?

# ブートストラップについて詳しく知りたい場合は、次をクリックしてください:

#Bootstrap チュートリアル ##Bootstrap 公式 Web サイト上のコンポーネントは直接使用することができ、コンポーネントライブラリ https://v3.bootcss.com/components/ にアクセスすると、Bootstrap のすべてのコンポーネント情報を参照して使用することができます。コンポーネントのスタイルを変更したい場合は、独自のスタイルを追加することも、公式スタイルライブラリ内の対応するスタイルを変更することもできます (公式ファイルには触れず、独自のスタイルを追加することをお勧めします)。以下に、いくつかのコンポーネントの使用法を紹介します。

1. フォントアイコンの使用

これらのアイコンの下にある名前は、フォントアイコンの名前です。対応するクラス名。使用時にクラス名に直接アクセスできます。ブートストラップ公式 Web サイトのコンポーネントを直接使用できますか?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap字体图标</title>
 
    <!-- 第一步：加载Bootstrap的层级样式表 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- 字体图标的引用 -->
    <span class="glyphicon glyphicon-euro"></span>
    <!-- 第二步：jQuery库，同时加载该库必须在加载bootstrap.min.js之前 (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 第三步：加载 Bootstrap 的核心库。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

2. ボタンコンポーネントの使用

注: ボタンstyle 7 種類があります: btn-default、btn-primary、btn-info、btn-success、btn-warning、btn-danger、btn-link;

ボタンのサイズには、btn-lg、btn が含まれます。 -sm, btn- xs three

さらに、input などの型でもブートストラップでボタンのスタイルを設定できます。

 <!-- 不同按钮样式 -->
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-info btn-sm">信息</button>
    <button type="button" class="btn btn-success btn-xs">确定</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>
    <hr>
    <!-- 按钮类设置 -->
    <a href="" class="btn btn-default" role="button">Link</a>
    <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus"></span>  Button</button>
    <input class="btn btn-danger" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

3. ボタンのドロップダウンメニュー

まず、ドロップダウンメニューの div コンテナーが必要で、スタイルを次のように設定します。ドロップダウン; 次に、ドロップダウンメニューのボタンスタイルは、dropdown-toggle を設定する必要があり、data-toggle 属性値はドロップダウンであり、ID を設定する必要があります。最後に、ドロップの ul の aria-labelledby 属性値-down メニューはボタンの ID 値に対応します。

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
 
  	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  		<!-- 下拉菜单标题 -->
  		<li class="dropdown-header">Dropdown header</li>
        <!-- 下拉菜单内容 -->
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Another action</a></li>
   		<li><a href="#">Something else here</a></li>
   		<!-- 分割线 -->
    	<li role="separator" class="divider"></li>
    	<li class="disabled"><a href="#">Separated link</a></li>
  	</ul>
</div>

4. ボタングループとネスト

ボタングループのサイズは、btn-group-lg、btn-group- で設定することもできます。 sm 、 btn-group-xs

<div class="btn-group btn-group-lg" role="group" aria-label="...">
 	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
 	<button type="button" class="btn btn-default">Right</button>
    <!--嵌套下拉按钮菜单-->
 	<div class="btn-group" role="group">
    	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></button>
   		<ul class="dropdown-menu">
     		<li><a href="#">Dropdown link</a></li>
     		<li><a href="#">Dropdown link</a></li>
  		</ul>
  	</div>
</div>

5. 垂直ボタングループ

btn-group-vertical クラスは

<div class="btn-group-vertical" role="group" aria-label="...">
 	<button type="button" class="btn btn-default">Left</button>
	<button type="button" class="btn btn-default">Middle</button>
 	<button type="button" class="btn btn-default">Right</button>
</div>

を実現できます。

6. ボタングループの整列

<div class="btn-group btn-group-justified" role="group" aria-label="...">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Left</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Middle</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Right</button>
	</div>
</div>

以上がブートストラップ公式 Web サイトのコンポーネントを直接使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AM

bootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。

ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AM

Webデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。

Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AM

BootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。

ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AM

Bootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。

ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AM

ブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。

ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AM

Bootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。

Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AM

BootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。

ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

DVWA

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