JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapで角丸のない全幅ジャンボトロンを実装する方法

Bootstrapで画面幅いっぱいに広がり、角が丸くない（角丸のない）ジャンボトロンを作成したい場合は、.jumbotronクラスをすべての.containerクラスの外側に配置し、代わりにその内側へ.containerを追加します。

仕組みの解説

通常、.jumbotronを.containerの中に配置すると、ジャンボトロンはコンテナの幅に収まり、デフォルトのスタイルとして角丸（rounded corners）が適用されます。

一方、.jumbotronをコンテナの外に直接置くと、ジャンボトロンはブラウザの全幅（full width）に拡張され、角丸も適用されなくなります。このとき、内側に.containerを入れておけば、見出しやテキスト、ボタンなどのコンテンツは画面中央に整然と配置され、読みやすいレイアウトを保てます。

実装例

以下のコードを実行して、実際の表示を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Example</title>
    <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
    <script src = "/scripts/jquery.min.js"></script>
    <script src = "/bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class = "jumbotron">
      <div class = "container">
        <h1>Welcome to landing page!</h1>
        <p>Example for jumbotron.</p>
        <p>
          <a class = "btn btn-primary btn-lg" role = "button">
            Click for more
          </a>
        </p>
      </div>
    </div>
  </body>
</html>

ポイントまとめ

  • .jumbotronは.containerの外側に配置することで全幅表示になり、角丸が消える。
  • コンテンツの位置調整のため、ジャンボトロンの内側に.containerを入れる。
  • ボタンにはbtn btn-primary btn-lgなどのクラスを組み合わせると、目立つCTA（行動喚起）ボタンになる。
  1. CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例

    CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector {    height: /*値*/    width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height

  2. CSS3で角丸（丸みを帯びたコーナー）を作成する方法

    CSS3で角丸（丸みを帯びたコーナー）を作成するには、border-radiusプロパティを使用します。このプロパティに「24px」のような値を指定するだけで、要素の四隅を滑らかに丸めることができ、デザインの幅が大きく広がります。以下は、角丸を持つボックスと通常の直角コーナーのボックスを並べて表示するサンプルコードです。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sa