Skip to content
Twitter Bootstrap のお勉強用
JavaScript Shell
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
_show_files
assets
trash
.gitignore
0100_layout_smartphone_simple.html
0110_layout_hero.html
0120_layout_fluid.html
0130_fixed_layout.html
0140_fluid_layout.html
0150_grid_simple.html
0160_grid_any.html
0170_grid_local_sidebar_r.html
0180_grid_local_sidebar_both.html
0190_grid_nesting.html
0200_grid_nesting_example.html
0210_container_h1_and_small.html
0220_navbar_fixed_with_padding_top.html
0230_navbar_nav_list.html
0240_navbar_left_right.html
0250_navbar_text_field.html
0260_navbar_dropdown.html
0270_navbar_all_mixed.html
0280_navbar_scrollspy.html
0290_footer.html
0300_text_decoration.html
0310_inline_labels.html
0320_blockquote.html
0330_list_ul_ol_dl.html
0340_table.html
0350_table_color.html
0360_thumbnails.html
0370_thumbnails_fill.html
0380_form.html
0390_form_controls.html
0400_form_disabled_readonly.html
0410_form_grid_based_width.html
0420_form_name_based_width.html
0430_form_uneditable_input.html
0440_form_input_append_prepend.html
0450_form_help_inline_help_block.html
0460_form_checkbox_radio.html
0470_form_error_success_warning.html
0480_form_inline_inputs_for_horizontal_list.html
0490_button.html
0500_button_loding.html
0510_button_controll.html
0520_button_string.html
0530_icon.html
0540_nav_list.html
0550_well.html
0560_nav.html
0570_nav_tabs_layouts.html
0580_nav_tabs_menu_with_dropdown.html
0590_nav_tabs_menu_hook_hidden_field_set.html
0600_nav_tabs_menu_ajax.html
0610_breadcrumbs.html
0620_pagination.html
0630_pager.html
0640_alert.html
0650_progress_bars.html
0660_tooltip.html
0670_popover.html
0680_popover_with_image.html
0690_popover_with_style_custmize.html
0700_modal_popup_dialog.html.erb
0710_modal_popup_dialog_style_only.html
0720_modal_popup_dialog_control.html
0730_modal_popup_dialog_for_youtube.html
0740_modal_popup_dialog_for_nicovideo.html
0750_modal_popup_dialog_for_excite.html
0760_modal_popup_dialog_event_hooks.html
0770_dropdown.html
0780_collapse_accordion.html
0790_carousel.html
0800_typeahead_auto_complete.html
0810_upgrade_tooltip_popover_modal.html
0820_upgrade_message_info.html
0830_copy_code_auto_select.html
0840_prettify_light_theme.html
0850_prettify_dark_theme.html
0860_header_masthead.html
0870_header_subhead.html
0880_less_realtime_compile.html
0890_yoyo_tricks.html
0900_login_page_from_bootstrap_document.html
0910_bootstrap_base_css.html
README.md
TODO
generate.sh
index.html

README.md

Twitter Bootstrap v2 の使い方を覚えるためのHTML

一覧

  1. ナビバーがスマホ対応のテンプレート
  2. ナビバーがスマホ対応だけど主にPC向けのレイアウト
  3. ナビバーがスマホ対応だけど主にPC向けのサイドバー付きレイアウト
  4. サイドバーなしタイプ
  5. 可変幅のレアイウト
  6. グリッドレイアウトの組み方
  7. グリッドレイアウトのさまざまな例
  8. 9と3に分けることで一時的に右サイドバーを作る例
  9. 3、6、3で分けて左右にサイドバーを作る
  10. グリッドレイアウトをネストする
  11. ネストしたグリッドレイアウトにテキストを流してみる
  12. H1とsmallタグ
  13. 固定トップバーを使うときは下に来る要素をずらすこと
  14. ツールバーにナビゲーションを並べるには?
  15. ナビゲーションを右側に並べるには?
  16. ツールバーに検索窓を左右に入れるには?
  17. ドロップダウン
  18. ツールバー全部入り
  19. スクロールに合わせてトップバーのactiveを切り替える
  20. フッター
  21. テキストの装飾 code b em
  22. インラインラベル
  23. blockquoteは本文をpで出典をsmallに入れる
  24. リスト
  25. テーブルまとめ
  26. テーブル - 色づけ
  27. 画像や動画を並べる
  28. 画像や動画を綺麗にたくさん並べる
  29. フォームのフィールドの上にラベルを表示するには?
  30. フォームの基本
  31. フォームの入力要素の disabled と readonly
  32. フォームの入力要素の横幅をグリッドに合わせるには?
  33. フォームの入力要素の横幅をキーワードで指定するには?
  34. 入力要素でもないタグで入力できないフィールドを装うには?
  35. 入力フィールドの前にフィールドの一部っぽいテキストをくっつけるには?
  36. 入力要素の右や下にヒントを表示するには?
  37. 入力要素のグループを縦に並べるには?
  38. フォームで入力要素を目立たせるには?
  39. 入力要素のグループを横に並べるには?
  40. ボタン
  41. ボタンで実行→実行中を表す
  42. ボタン - toggleメッセージで対象のボタンが窪む
  43. ボタン - 任意のラベルに切り替える美しい仕組み
  44. アイコン使用例
  45. 使いやすいそうなナビゲーションリスト
  46. くぼみパターン - ちょっとしたグループ化と注目
  47. navシリーズ
  48. タブは上下左右に配置できる
  49. タブ - 横幅が足りないのでドロップダウンにする例
  50. タブが変更されたときの検知方法
  51. タブの切り替えトリガーに反応してAjax
  52. パンくず
  53. ページネーション
  54. ページャー
  55. 1行用 + 閉じるボタン付き(x4色)
  56. プログレスバー
  57. ツールチップに画像を出すには?
  58. ポップオーバー
  59. ポップオーバーで画像埋め込み
  60. ポップオーバーのカスタマイズ
  61. ポップアップダイアログのスタイル確認用
  62. ポップアップダイアログのコントロール例
  63. ポップアップの中でiframeを表示する例
  64. ポップアップの中でニコニコ動画を表示する例
  65. ポップアップの中で他のサイトを表示する例
  66. ポップアップのフック確認
  67. ドロップダウン
  68. アコーディオン
  69. 画像スライド
  70. オートコンプリート
  71. ツールチップ→ポップオーバー→ダイアログの順でアップグレードする例
  72. 「メッセージが届いています」をだんだん強調していく
  73. クリックするだけで全選択するには?
  74. コードに色付け - 明い色
  75. コードに色付け - 暗い色
  76. Twitter bootstrap.css のデモで使われているヘッダーのデザイン
  77. Twitter bootstrap JavaScript サイドのデモで使われているヘッダーのデザイン
  78. LESSの動的コンパイル
  79. ヨーヨートリック集
  80. Bootstrap のドキュメントを元にログインページを作ってみる
  81. わからなくなったらこれを見る

確認方法

$ open index.html

操作

shift + n: next
shift + p: prev
shift + i: index
Something went wrong with that request. Please try again.