一般的な CSS フレームワークをマスターし、Web ページを簡単に構築します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

一般的な CSS フレームワークをマスターし、Web ページを簡単に構築します

王林

Jan 05, 2024 am 11:21 AM

よく使われるcssフレームワークWeb ページを構築する

一般的な CSS フレームワークをマスターし、Web ページを簡単に構築します

一般的に使用される CSS フレームワークを理解して、Web ページを迅速に構築できるようにしましょう

現代の Web 開発では、CSS フレームワークが非常に重要な役割を果たしています。これらは開発者に豊富なスタイルとレイアウトのオプションを提供し、Web ページの構築をより効率的かつ簡単にします。この記事では、一般的に使用される CSS フレームワークをいくつか紹介し、それらをより深く理解して使用するのに役立つ具体的なコード例を示します。

Bootstrap
Bootstrap は、現在最も人気のある CSS フレームワークの 1 つです。 HTML、CSS、JavaScript に基づいており、豊富な UI コンポーネントと応答性の高いレイアウトオプションを提供します。 Bootstrap を使用すると、美しく応答性の高い Web ページを簡単に構築できます。

Bootstrap を使用してナビゲーションバーを構築するサンプルコードを次に示します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Foundation
Foundation は、多数の UI も提供する、もう 1 つの人気のある CSS フレームワークです。コンポーネントとレスポンシブレイアウトオプション。 Bootstrap とは異なり、Foundation はカスタマイズと柔軟性に重点を置いており、開発者が独自のニーズに合わせてカスタマイズできるようにしています。

次は、Foundation を使用してボタン付きのボタンを構築するサンプルコードです:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="cell small-6">
        <button class="button">Button 1</button>
      </div>
      <div class="cell small-6">
        <button class="button">Button 2</button>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.js"></script>
</body>
</html>

Bulma
Bulma は、シンプルさと直観性を提供する軽量の CSS フレームワークです。スタイルとレイアウトのオプション。 Bulma は Flexbox レイアウトに基づいており、Bootstrap と同様のセマンティック CSS 命名規則を使用します。

以下は、Bulma を使用して応答性の高いナビゲーションバーを構築するためのサンプルコードです:

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="/static/imghwm/default1.png"  data-src="logo.png"  class="lazy" alt="logo">
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

上記は、一般的に使用される 3 つの CSS フレームワークの簡単な紹介とコード例です。もちろん、これはその機能の氷山の一角にすぎません。特定のニーズに基づいて詳細に学習して使用できる、さらに多くのコンポーネントやオプションも提供しています。 Bootstrap、Foundation、Bulma のいずれであっても、美しく応答性の高い Web ページをより速く構築し、開発効率を向上させるのに役立ちます。この記事がお役に立てば幸いです!

以上が一般的な CSS フレームワークをマスターし、Web ページを簡単に構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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