タグ

bootstrapに関するshozzyのブックマーク (5)

  • Railsアプリで Bootstrap 4 を利用する - Qiita

    注意点 投稿ではWebpackerがインストールされてないRails5以前のアプリを対象にBootstrap4を導入する手順を掲載しております。 Webpackerが標準となったRails6アプリにBootstrap4を導入する際には以下の記事がとても参考になりました🙇‍♂️ RailsBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう - Qiita はじめに Bootstrap 4のComponentsの中にちょうど使いたいと思っていた部品があったので、Bootstrap 4をRailsに導入する手順を確認しました。 公式サイト Bootstrap · The most popular HTML, CSS, and JS library in the world. 注意点 投稿時点でのBootstrapのバージョンはv4.0.0-beta.2 4.

    Railsアプリで Bootstrap 4 を利用する - Qiita
    shozzy
    shozzy 2019/02/04
    app/assets/stylesheets/application.scss の中で変数使えばカスタマイズできるのかな?
  • 空白ユーティリティ~Bootstrap4移行ガイド

    ユーティリティ 空白ユーティリティ Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 空白ユーティリティ(Spacing) v4.0.0新設 v4.2.1一部追加 Bootstrapには、要素の外観を変更するための幅広い簡潔なレスポンシブマージンとパディングユーティリティクラスが組み込まれている。 使い方(How it works) 可変性に優れた margin や padding 値を、要素またはその周辺のサブセットに簡略なクラスで割り当てる。個々のプロパティ、すべてのプロパティ、垂直方向と水平方向のプロパティのサポートが組み込まれている。クラスは、.25rem から 3rem までのデフォルトのSassマップから構築。 記法について(Notation) xs から xl までの全てのブレークポイントに適用される空白ユーティリティには、ブレ

    空白ユーティリティ~Bootstrap4移行ガイド
  • Start Bootstrap

    Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.

    Start Bootstrap
    shozzy
    shozzy 2019/01/28
    サイトのジャンルごとに特化させたbootstrapテンプレート集。ポートフォリオ用のものもある。
  • Bootstrapをカスタマイズする上で必ず知っておきたい考え方

    最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。 今回は特にCSSについてのお話です。 Bootstrapのカスタマイズパターン 現状、CSSのカスタマイズ方法として考えられるパターンが3つあります。 梅パターン すでに用意されているスタイル・コンポーネントをそのまま使う方法。 定義済みの スタイル や コンポーネント の組み合わせにより、ページを作成します。配置するのみ。 見た目のカスタマイズができないので、簡素でオリジナリティの無いデザインになります。 ザ・Bootstrap。 竹パターン すでに用意されているスタイル・コンポーネントをカスタマイズして使う方法。 定義済みのCSSを継承(上書き)して、元のデザインを変更します。 少ない作業で効率的にコーディングができます。 松パターン すでに用意されているスタイル・コンポーネントをカス

    Bootstrapをカスタマイズする上で必ず知っておきたい考え方
  • 今年の夏こそ!スリムなNavbarでモテかわウェブサービスに - New-Village

    Bootstrap3のNavbarを使うとヘッダー領域が50px確保されます。 しかし、野暮ったい…。どのサイトを見ても、ページロゴとメニューとユーザー管理機能くらしか置いていないんだし、夏のビーチのお姉ちゃんのように、Navbarはキュッと締まっていた方がいいと思うんだ。 気になったので、手短なサイトのヘッダーを調べてみると、やっぱりヘッダーの高さは50pxより低く設定されている。 Hatena Blogのヘッダーは37px JIRA/Bitbucketは40px StackOverflowは32px(これは流石にやりすぎな気がスル) Facebookは42px ちなみに、ヘッダーが50pxより高くされているサイトもある。検索と閲覧が中心で、あまり画面内でコメントを書いたりしないサイトが多いようだ。 Githubは60px Googleも60px RubyGemsは75px 閑話休題。

    今年の夏こそ!スリムなNavbarでモテかわウェブサービスに - New-Village
  • 1