Bootstrapのグリッドシステム

Bootstrapのグリッドシステム

グリッドシステムとは、サイトの割る付けの構成を横12ブロック単位で分割できるように考えられたもので、クラスを col-xs-3 のように指定すると分割できます。

例えば、

と、書くと、

1 2 3 1 2 3 4 5 6 7 8 9

col-xs-3で左から3ブロック分と、次のDIVで9ブロック分とるけど、offsetで、スタート位置を左から3ブロックずらしてから9ブロック使いますとなります。

containerで割り付ける領域を指定。rowで行を指定(横に並んだり、ブレークして縦に引っ付いたりする単位)。
containerは固定幅指定で、container-fruidは流動的に変化する。

xsの部分は、作っているWEBサイトがどのような画面サイズの端末からアクセスされることを期待するのかによって以下のように選択します。

モバイル(768p未満) タブレット(768px以上、992px未満) デスクトップ(992px以上、1200px未満) デスクトップ大画面(1200px以上)
class名接頭辞 .col-xs- .col-sm- .col-md- .col-lg-
横幅ブレークポイント なし(auto) 750px 970px 1170px

ここに、色々なパターンが紹介されているので、サイト構成をアレンジしてみてね。

http://bootstrap3-guide.com/base/grid.html
http://getbootstrap.com/examples/grid/


ULのドットを消す/画像にする

ULのドットを消す

  • 書き方
  • 出力結果

ULのドットを画像にする

  • 書き方
  • 出力結果

  • googleマップにマーカーしてメッセージを付ける

    googleマップにマーカーしてメッセージを付けるサンプル



    タブのサンプル

    tabのサンプルです。




    HTML5のVIDEOタグを使ったストリーミング(HLS)

    概要

    1. ffmpegのインストール
    2. mp4ファイルの用意
    3. m3u8リスト ts分割
    4. apacheのmime type追加
    5. ファイルの配置とm3u8の編集
    6. HTMLページを作成してアクセスしてみる

    詳細

    1. ffmpegのインストール
    2. mp4ファイルの用意
    3. 手持ちのデータを利用する!

    4. m3u8リスト ts分割
    5. 分割前のファイルを happy.mp4 とします。
      分割後のリストファイルを stream.m3u8 分割ファイルを stream000.ts とします。(000の所は001,002,…と増えていきます)

    6. apacheのmime type追加
    7. mine typeに以下を追加します

      ubuntuのdefaultに追加する場合

      nginxの場合 mime.typesに以下を追加

    8. ファイルの配置とm3u8の編集
    9. DocumentRootから以下の通りファイルを配置します。

      stream.m3u8リストの中身をパスに合わせて編集します。相対パスでもいけると思います。

    10. HTMLページを作成してアクセスしてみる
    11. http://URL/index.html

      再生されましたか?

    H.264

    MP4Boxを使った、MPEG-DASH

    http://URL:8999/index.html

    WindowsなChromeからもみえるようになった!・・・が、途中でとまっちゃう。