はじめに
すぐに始める BootstrapのプロダクションレディなCSSとJavaScriptをCDN経由で取り込むことで、ビルドステップを必要とせず、すぐに始められます。Bootstrap CodePenのデモをご覧ください。 プロジェクトの最上位フォルダにindex.htmlファイルを新規作成します。 モバイルデバイスでの適切なレスポンシブ動作のために<meta name="viewport">タグも含めてください。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> </head> <body> <h1>Hello, worl
爆速で開発を終わらせる！Bootstrapチートシートがチートすぎる | プログラミング教育ナビ
Bootstrapとは、Twitter社が開発したCSSのフレームワークです。通常は自分でスタイルを実装していく必要がありますが、Bootstrapを利用すれば、ボタンやフォームなど既に用意されているスタイルを適用するだけで、誰でも素早く整ったデザインのページを作ることが可能になります。 今回は、さらに簡単かつ素早くスタイルを開発できるブートストラップのチートシートをご紹介します。 プレビューを見ながらコードを確認できるチートシート 既存のBootstrapのチートシートというのは、Bootstrap 3 cheat sheetのように、グリッドなどに使われているスタイルをPDFにまとめたものでした。一方で、今回ご紹介するBootstrap 4 Cheat Sheetは、要素をクリックするとコード・スニペットとプレビューを表示してくれる便利なチートシートです。 「Code snippet」
bootstrapのmodal dialogを動的に変化させる - koooya’s diary
bootstrapのmodal dialogの具体的な使い方は公式で http://getbootstrap.com/javascript/#modals まずは公式のをカスタマイズしたソースを載せておきます。 <script> $(function(){ $(function(){ $('#modal-trigger').hide(); $('#dummy').on('click', function(){ $('.modal-dialog').find('.modal-body').html('<h1>Hello world!</h1>'); $('.modal').modal('show'); }); }); }); </script> <button type="button" id="dummy">show</button> <!-- Button trigger modal -
JavaScript · Bootstrap
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one. Overview Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト <link href="bootstrap.css" type="text/css" rel="stylesheet"> <!-- Bootstrap 3 --> <link href="css/calendar.css" type="text/css" rel="stylesheet"> <script src="underscore-min.js" type="text/javascript"></script> <script src="js/calendar.js" type="text/javascript"></script> <script src="bootstrap.js" type="text/javascript"></
Bootstrap-シングルページ制作編１ | みずかず
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編１ではグローバルナビゲーション（Static top navbar）を設置するところまでの記録。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ ＊Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。 シングルペ
入門 ≪ Bootstrap3日本語リファレンス
入門 Getting started Bootstrap3の使用に必要なファイルの入手や読み込みについて。 ダウンロード 公式サイトのDownload Bootstrapより、Bootstrap3をダウンロード。 2015.1.7現在の最新版は、「v3.3.1」。 ダウンロードしたbootstrap-3.3.1-dist.zipを解凍すると、distフォルダが現れる。そのdistフォルダの中に、css、js、fontsの３つのフォルダがある。 下記のファイルを自分のサーバーにアップロードする。 cssフォルダ内のbootstrap.min.css jsフォルダ内のbootstrap.min.js fontsフォルダ内の全てのファイル。 尚、ダウンロードもアップロードもせず、 「Bootstrap CDN」を使う方法もある。 基本テンプレート Bootstrapの使用に必要なファイルを読み
Bootstrapを使ってみる。画像スライド編（Carousel） | みずかず
Bootstrapを使ってみよう。画像スライド編（Carousel（カルーセル）） 今回はBootstrapで用意されている、JavaScriptを使ったコンポーネント「Carousel（カルーセル）」を利用してみよう。 「Carousel（カルーセル）」は複数の画像をスライド表示してくれるもの。 インジケーターやコントローラーもセットされていてすぐに使うことができる！ ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Carousel（カルーセル）の利用方法 まずはBootstrapのサイトで用意されているカルーセルをみてみよう。 Bootstrapの上部メニューより「JavaScript」をクリックしてページ移動後、右サイドメニューから「Carousel」をクリック。 すると「Carousel」のExamplesが表示されている
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイバー・ラボ