とほほのBootstrap 4入門 - タイポグラフィ - とほほのWWW入門
とほほのBootstrap 4入門 トップ Bootstrap 4入門 タイポグラフィ ヘッダ ヘッダには <h1>～<h6> を使用します。.h1～.h6 のクラスも使用できます。<small class="text-muted"> で副題をつけることもできます。 H1 Bootstrap入門 Secondary text H2 Bootstrap入門 Secondary text H3 Bootstrap入門 Secondary text H4 Bootstrap入門 Secondary text H5 Bootstrap入門 Secondary text H6 Bootstrap入門 Secondary text <h1>H1 Bootstrap入門 <small class="text-muted">Secondary text</small></h1> <h2>H2 Bootst
Bootstrap 4 をカスタマイズする - Qiita
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。
Screenreaders
Screenreaders Screenreaders(スクリーンリーダー）を除くすべてのデバイスの要素を非表示にします。 .sr-only でスクリーンリーダーを除くすべてのデバイスで要素を非表示できます。.sr-only と .sr-only-focusable を組み合わせると, 要素がフォーカスされているときに再表示します（例：キーボードのみのユーザーなど）。mixinとしても使用可能です。 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> // Usage as a mixin .skip-navigation { @include sr-only; @include sr-only-focusable; }
Input group
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-
remの使用について追記 - Qiita
Bootstrapのドキュメントcontainerのサンプルコードに、divのサイズにrem単位を使うらしい。 MDNを調べると、 remは、 ルート要素（html)のfont-size と説明しているが、外国語の資料によると、ルート要素を基準値にした相対単位だそうだ。 html要素のfont-sizeは１０pxとすれば、 1rem=10px 2.5rem=25px 3rem=30px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-3.2.1.min.js"></script> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js
Bootstrapで横幅いっぱいに画像を表示しよう！ジャンボトロン（jumbotron）の設置方法
今回はサイトの華である、メインイメージを配置してみましょう。画面の横幅いっぱいに画像が表示され、キャッチコピー的なテキストが乗ってるアレですね。Bootstrapでは「jumbotron（ジャンボトロン）」というクラスで実現できます。 このように、横幅いっぱいの画像を表示するまでが今回の内容となります。 画像に重なったキャッチコピー、ボタンの配置に関しては、次回解説予定です。 「jumbotron」クラスを使ってみよう！ それでは早速、実践していきましょう。 前回作成したindex.htmlファイルを引き続き使用します。念の為、index.htmlと同じ階層に画像が準備されているか、確認してくださいね。画像は前回の記事からダウンロードできます。 HTMLソースをコピペする index.htmlを開き、前回貼り付けたLOGO画像部分の下（※）に以下のHTMLをコピペしてください。 ※「<!–
とほほのBootstrap 3入門 - とほほのWWW入門
とほほのBootstrap 3入門 トップ Bootstrap 3入門 はじめに このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap とは Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018
Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用
複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザインを採用。 公開されのは現地時間8月19日で、Bootstrapの2周年にあたる日でした。 Bootstrap 3のテンプレート例 下記はBootstrap 3ではさまざまなテンプレートがの用意されていますが、下記もそのテンプレートの1つ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レンジ入力～Bootstrap5設置ガイド
【Bootstrap基礎学習17】ナビゲーションを作成してみよう！ | katsulog
Start Bootstrap