Bootstrap 304 の美しさ - カスタマイズされた CSS、テーマ、Package_html/css

Bootstrap 304 の美しさ - カスタマイズされた CSS、テーマ、Package_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:59:21

オリジナル

1230 人が閲覧しました

この記事の主な内容:

■ カスタム CSS
■ カスタムテーマ
■ カスタムパッケージ

カスタム CSS

場合によっては、Bootstrap のデフォルト CSS をカスタマイズまたは書き換える必要があります。
→cssフォルダーの下にsite.cssを作成します
→site.css内のコンテナクラスを書き換えたいとします

.container {    background-color: #eee;}

ログイン後にコピー

→site.cssをindex.htmlに参照し、cssの下にbootstrap.minに配置します。

    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />

ログイン後にコピー

→index.html を参照すると、背景色が灰色になっていることがわかります

テーマをカスタマイズします

領域で、menu の ID を持つ div に属性 class="navbar navbar-default を追加します

        <header class="container">            <div id="menu" class="navbar navbar-default">                <div id="logo">                    <a href=".">新浪体育</a>                </div>                <ul>                    <li><a href="#">主页</a></li>                    <li><a href="#">关于我们</a></li>                    <li><a href="#">联系我们</a></li>                </ul>                <button class="btn">登录</button>            </div>        </header>

ログイン後にコピー

css フォルダーの下にある bootstrap-theme.min.css スタイルファイルをindex.html に導入し、bootstrap.min.css の下に配置します。以下のようになります:

    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />

ログイン後にコピー

ナビゲーションコンテンツが角丸四角形で囲まれていることがわかります。現在のテーマに満足できない場合は、Bootstrap オープンソーステーマを提供する http://bootswatch.com/ にアクセスすることもできます。たとえば、Cyborg テーマに興味がある場合は、[ダウンロード] ボタンをクリックし、開いたページを右クリックして [名前を付けて保存] を選択し、ファイル名を Cyborg.bootstrap.min.css に設定して、次の css フォルダーに保存します。ウェブサイト。

元の bootstrap-theme.min.css ファイルを Cyborg.bootstrap.min.css ファイルに置き換えると、次のようになります:

    <link href="css/bootstrap.min.css" rel="stylesheet" />    <link href="css/Cyborg.bootstrap.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" />

ログイン後にコピー

もう一度 Index.html を参照すると、テーマが大きく変更されています:

カスタムパッケージ

→Web サイトを開きます: http://getbootstrap.com/

→[カスタマイズ] メニュー項目をクリックします
→必要なオプションを確認します
→最後にページの下部にある [準拠してダウンロード] ボタンをクリックします, ので、カスタマイズされたパッケージが生成されます

参考：WilderMinds

「The Beauty of Bootstrap 3」シリーズのカテゴリには以下が含まれます:

The Beauty of Bootstrap 3 01-ダウンロードしてページを紹介します

The Beauty of Bootstrap 3 02 - グリッドの導入と応用

Bootstrap の美しさ 3 03 - 独立した行、テキストの折り返し、画像アダプティブ、隠し要素

Bootstrap の美しさ 3 04 - カスタマイズされた CSS、テーマ、パッケージ

Bootstrap の美しさ 3 05 - タイポグラフィー、ボタン、アイコン、ナビゲーションおよびナビゲーションバー、リスト、テーブル、フォーム