課題タグを使用せずにテーブルを作成するにはどうすればよいですか?-ブートストラップのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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

課題タグを使用せずにテーブルを作成するにはどうすればよいですか?

藏色散人

Aug 20, 2021 am 10:52 AM

表面

前回の記事「フロントエンド三銃士を使って美しいカウントダウンエフェクトを作成する方法」では、HTML、css、JavaScriptでカウントダウンエフェクトを実現する方法を紹介しました。困っている人はそれについて学ぶことができます~

この記事の焦点は、

タグを使用せずにテーブルを作成する方法を説明することです。

まず、HTML は Web ページの作成に使用される標準のマークアップ言語であることを知っておいてください。HTML では

タグを使用してテーブルを作成できますが、実際には Cascading Style を使用します。シート(CSS)、タグは使用不可、表はHTMLで作成可能！

BootStrap、Foundation、Pure、Bulma、UI kit、Materialize CSS、Semantic UI、Spectre など、さまざまな CSS フレームワークが利用可能だからです。

Bootstrap は、非常に広く使用されている CSS フレームワークです。 Bootstrap のグリッドシステムには、インターフェイス内の項目間の空間分布と強力な位置合わせ機能を提供する 1 次元レイアウトモデルであるフレックスボックスが組み込まれています。

次は、CSS の BootStrap フレームワークを使用してテーブルを作成します。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建表</title>

    <!--Linking the BootStrap CDN-->
    <link rel="stylesheet" href=
            "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity=
                  "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous">

    <style type="text/css">
        div {
            text-align: center;
        }

        #heading {
            font-weight: 700;
        }
    </style>
</head>

<body>
<div class="container">
    <h1 id="示例表格">示例表格</h1>

    <div class="row border border-dark bg-success" id="heading">
        <div class="col-3 border border-dark">Id</div>
        <div class="col-3 border border-dark">姓名</div>
        <div class="col-3 border border-dark">性别</div>
        <div class="col-3 border border-dark">工资</div>
    </div>

    <div class="row border border-dark">
        <div class="col border border-dark">101</div>
        <div class="col border border-dark">张三</div>
        <div class="col border border-dark">男</div>
        <div class="col border border-dark">50000</div>
    </div>

    <div class="row border border-dark bg-info">
        <div class="col border border-dark">102</div>
        <div class="col border border-dark">李四</div>
        <div class="col border border-dark">女</div>
        <div class="col border border-dark">30000</div>
    </div>

    <div class="row border border-dark">
        <div class="col border border-dark">103</div>
        <div class="col border border-dark">王二</div>
        <div class="col border border-dark">男</div>
        <div class="col border border-dark">40000</div>
    </div>

    <div class="row border border-dark bg-info">
        <div class="col border border-dark">104</div>
        <div class="col border border-dark">赵五</div>
        <div class="col border border-dark">女</div>
        <div class="col border border-dark">45000</div>
    </div>
</div>
</body>

</html>

効果は次のとおりです。 :

課題 <table> タグを使用せずにテーブルを作成するにはどうすればよいですか?

注:

Bootstrap CDN は、ユーザーがサーバーからリモートで CSS、JavaScript、画像をロードできるようにするパブリックコンテンツ配信ネットワークです。 BootStrap CDN は、組み込み CSS ライブラリクラスにアクセスするためのコードにリンクします。

コンテナコンテナは、実際のコンテンツを水平方向に中央に配置して埋めるために使用されます。

行行は列をカプセル化します。

列列は行の直接の子です。コンテンツは列に配置する必要があります。幅が指定されていない列は、自動的に同じ幅の列として表示されます。列幅を明示的に指定することも、異なる画面サイズに異なる幅を割り当てることもできます。事前定義されたユーティリティクラス (bg-success、bg-info、bg-danger、bg-warning など)、スタイルシート、またはインラインスタイルを使用して、さまざまな行または列の背景色を指定できます。

Border は、セルの周囲に境界線を作成するために使用される BootStrap の事前定義クラスです。さらに、色や境界線の幅を指定することで外観と雰囲気をさらに高めることができる、いくつかの境界線ユーティリティクラス (border-dark、border-light、border-danger、border-success、border-warning など) があります。

関連チュートリアルの推奨事項: 「JavaScript 基本チュートリアル」「ブートストラップチュートリアル」「HTML ビデオチュートリアル」

以上が課題タグを使用せずにテーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

React and Bootstrap：ユーザーインターフェイス設計の強化Apr 26, 2025 am 12:18 AM

ReactおよびBootstrapをシームレスに統合して、ユーザーインターフェイス設計を強化できます。 1）依存関係パッケージをインストール：NPMINSTALLBOOTSTRAPREACT-BOOTSTRAP。 2）CSSファイルをインポート：Import'BootStrap/DIST/CSS/BOOTSTRAP.MIN.CSS '。 3）ボタンやナビゲーションバーなどのブートストラップコンポーネントを使用します。この組み合わせにより、開発者はReactの柔軟性とBootstrapのスタイルライブラリを活用して、美しく効率的なユーザーインターフェイスを作成できます。

ブートストラップをReactに統合する：実用的なガイドApr 25, 2025 am 12:04 AM

BootstrapをReactプロジェクトに統合する手順には次のものがあります。1。ブートストラップパッケージをインストールします。2。CSSファイルをインポートします。3。ブートストラップクラス名をスタイル要素に使用します。この統合は、Reactのコンポーネント化とブートストラップのスタイルシステムを利用して、効率的なUI開発を実現します。

ブートストラップは何に使用されますか？実用的な説明Apr 24, 2025 am 12:16 AM

bootstrapisapowerfulframeworkthatsimplifiessimponsive、mobile-firstwebsites.itoffers：1）agridsystemforadaptablelayouts、2）styledelements likebuttonsansandsforms、and3）javascriptcomponentssuchascascarouselsersivity。

ブートストラップ：レイアウトからコンポーネントまでApr 23, 2025 am 12:06 AM

Bootstrapは、HTML、CSS、JavaScriptを統合して、開発者がレスポンシブWebサイトを迅速に構築できるようにするTwitterが開発したフロントエンドフレームワークです。そのコア関数には、グリッドシステムとレイアウト：12列の設計、FlexBoxレイアウトの使用、さまざまなデバイスサイズのレスポンシブページのサポートに基づいています。コンポーネントとスタイル：ボタン、モーダルボックスなどのコンポーネントの豊富なライブラリを提供し、クラス名を追加することで美しい効果を達成できます。それがどのように機能するか：CSSとJavaScriptに依存しているCSSは、より少ないまたはSASSの前処理を使用し、JavaScriptはJQUERYに依存してインタラクティブで動的な効果を実現します。これらの機能を通じて、ブートストラップは開発を大幅に改善します

ブートストラップとは何ですか？初心者向けの紹介Apr 22, 2025 am 12:07 AM

bootstrapisafreecsframeworkthatsは、wevevidementbovidingprovidingpre-scomponentsandjavascriptplugins.it.sidealfor forcreatingResponsive、Mobile-firstwebsites、提供可能なgridsystemsystemSystemforlayoutsandasuoutsutivortiveportivedization forlearning customustomizationを提供します。

Bootstrap Demystified：簡単な説明Apr 21, 2025 am 12:13 AM

Bootstrapisafree、open-sourcessframeworkthathelpscreatersive、mobile-firstwebsites.1）itoffersigridsystemforlayoutfflexibility、2）forquickdesignを含む、3）ishighlycustomizableoavoidoavoidoidolooks、

ブートストラップvs. React：適切なアプローチを選択しますApr 20, 2025 am 12:09 AM

Bootstrapは迅速な建設や小規模プロジェクトに適していますが、Reactは複雑でインタラクティブなアプリケーションに適しています。 1）ブートストラップは、事前に定義されたCSSおよびJavaScriptコンポーネントを提供して、応答性のあるインターフェイス開発を簡素化します。 2）Reactは、コンポーネント開発と仮想DOMを通じてパフォーマンスとインタラクティブ性を向上させます。

Bootstrapの目的：一貫した魅力的なWebサイトの構築Apr 19, 2025 am 12:07 AM

Bootstrapの主な目的は、開発者がレスポンシブでモバイルファーストのWebサイトを迅速に構築できるようにすることです。そのコア関数には、次のものが含まれます。1。グリッドシステムを介したさまざまなデバイスのレイアウト調整を実現するレスポンシブ設計。 2。ナビゲーションバーやモーダルボックスなどの事前定義されたコンポーネントは、美学とクロスブラウザーの互換性を確保します。 3.カスタマイズと拡張機能をサポートし、SASS変数とミックスインを使用してスタイルを調整します。

See all articles