[B! Bootstrap] kjtecのブックマーク

Bootstrap4移行ガイド

Bootstrap4移行ガイド ※2020/8/7‥v4.5.2の公開に伴い更新。 2020/6/25‥Bootstrap5設置ガイドの開設に伴いサイト移転 PST︵米国太平洋時間︶2018/1/18にBootstrap v4.0.0安定版が公開されました。これまでのBootstrap3.xから4.xに変更するにはcssやjsファイルを差し替えただけではデザインが崩れてしまいます。そこでBootstrap4の使い方を3.xからの変更箇所を交えて解説しています。解説はできるだけ最新版︵v4.5.2︶に対応するよう更新しています。 ※Bootstrap4は、v4.4の公開をもって長期サポート︵LTS︶に移行すると発表がなされています。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 ※Bootstrap5.xの解説は、Bootstrap5設置ガイドをご覧下

kjtec 2018/01/26

Bootstrap

リンク

W3Schools.com

W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999

kjtec 2018/01/26

Bootstrap

リンク

Twitter Bootstrap 3 でアイコンを使う方法 | 餃子マナー

とすれば Home という感じでアイコン付きボタンを表示することができます。 Bootstrap3ではこの書き方ではアイコンが表示されなくなったようです。現在 Bootstrap3は RC2 というバージョンですが、RC = Release Candidate︵リリース候補︶なのできっと正式版でもこの仕様は変わらないんじゃないでしょうか。 Bootstrap3でアイコンを使うすでに Bootstrap3　をダウンロードしてある前提で進めます。 Bootstrap3をダウンロードすると下図のようにいろいろなファイルが入っていますが、使うときに必要なのは dist フォルダの中の css とjsフォルダだけです。アイコンリソースの準備ドキュメントに書いてある部分を引用すると、 Glyphicons With the launch of Bootstrap 3, ic

kjtec 2017/07/11

アイコンの表示方法

Bootstrap

リンク

Bootstrap：Modal表示時に左側にずれる件 - IT業界のすみっこ暮らし

スクロールバーの対応のためか、Modal表示時に"padding-right:17px"の値が追加され、左側にずれる件の対策。 CSSで対応 stackoverflow.com Modal表示時にDomが左側にずれる場合、以下の設定を追加する ①bodyのスタイル修正 ■ 原因 <body class="modal-open" style="padding-right: 17px;">★ ■ 対策 .modal-open { padding-right: 0px !important; } ②Modalのスタイル修正 ■ 原因 <div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block; paddi

kjtec 2017/06/13

リンク

Bootstrap3日本語リファレンス

Bootstrapは、HTML、CSS、Javascriptからなる人気のフレームワーク。 Bootstrap3日本語リファレンスでは、モバイル・ファーストとして生まれ変わったBootstrap3について解説しています。初心者でもわかる様に、ほぼ全てにサンプルを付けています。

kjtec 2017/02/23

リンク

Bootstrap 3 Tutorial

W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999

kjtec 2017/02/10

Bootstrap3 Tutorial

リンク

Bootstrap3.x.で何かやるときの最低限のメモ - Qiita

簡単なデモや管理画面を作るレベルで利用する最低限のBootstrapの知識のメモ。フロントエンドを作るのはここが参考になります。やりたいこと Bootstrapって、テイストそのままでいいので、さくっと作りたい！と思っても、何かとCSSいじることになり、標準のまま使えないことが多いです。ここでは、オリジナルのCSSには一切手を入れず、基本的な画面をレイアウトしてみます。・オリジナルのCSSに一切手をいれない。・いじる場合は、inline styleで少しいじる。・オリジナルのCSSは、ほとんど使わない︵10行以下︶。ひな形なにも無ければ基本CDN派。たまにネット未接続環境で﹁はっ﹂とすることがあるが、問題ない。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title>

kjtec 2017/01/17

Bootstrap

リンク

algo13.net

algo13.net 2023 著作権. 不許複製プライバシーポリシー

kjtec 2017/01/10

リンク

イベント ≪ モーダル ≪ JavaScript ≪ Bootstrap3日本語リファレンス

HTML <p>show.bs.modal: <span id="showBsModal"></span></p> <p>shown.bs.modal: <span id="shownBsModal"></span></p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ａ）」ボタン"> 開く（Ａ） </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ｂ）」ボタン"> 開く（Ｂ） </b

kjtec 2017/01/10

リンク

ぷにおちゃん～ Bootstrap 3でTooltips(ツールチップ)機能を試して見る

リンクへの指定デフォルト位置(top)に、ツールチップを表示します。 <p> <a href="#" data-toggle="tooltip"title="上に表示されます"> 上に表示されます(デフォルト)</a> </p> リンクの右に、ツールチップを表示します。2行目で、data-placementで表示位置を指定しています。また、3行目にdata-containerを指定しているため、ツールチップは折り返して表示されません。 <p class="text-right"> <a href="#" data-toggle="tooltip" data-placement="right" data-container="body"title="右に表示されます">折り返されません</a> </p> Panelへの指定リンク要素だけでなく、panelクラスやpanel-body

kjtec 2016/12/02

Tooltips

Bootstrap

リンク

はてなブックマーク

タグ

関連タグで絞り込む (4)

Bootstrapに関するkjtecのブックマーク (11)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス