Bootstrap使用心得

29162 ワード

bootstrap

TwitterのBootstrapのフレームワークが強く使いやすいと聞いていたが、このほど小丸ツールボックスの公式サイトを改版するために1週間を費やした.
この文章は私がBootstarpを使っているいくつかのポイントをまとめています.1.レイアウトBootstrapフレームワークのレイアウトはグリッドシステムを採用しており、デフォルトではページを12列に分けている.
使用時にはdivのclass属性に適切なクラスを付与すればよい.例を次に示します.

<div class="row">

    <div class="col-sm-4 col-xs-12">

        <h2 class="page-header"> </h2>

    </div>

<div>

最外層に1つの

を1行として挿入します.

col-sm-4のsmはsmallを表し、幅750 px以上で4列を占有する.col-xs-12のxsは、幅が750 px未満の場合に12列(すなわち満画面表示)を占有するが、一般的には、2つを記入するだけで応答型ページのニーズを満たすことができる.またclass=「col-sm-4 hidden-xs」、すなわち750 px未満で要素を非表示にすることもできます.参考資料:http://v3.bootcss.com/css/#grid.ナビゲーションバーBootstrapフレームには使いやすいナビゲーションバーがプリセットされており、記録に値するものは多くなく、参考資料を直接見れば把握できます.

    <header class="navbar navbar-inverse navbar-fixed-top" role="banner">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" 

         data-target="#example-navbar-collapse">

                    <span class="sr-only"> </span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand"  href="javascript:scroll(0,0)">Maruko Toolbox</a>

            </div>

        <nav class="collapse navbar-collapse" id="example-navbar-collapse"  role="navigation">

            <ul class="nav navbar-nav">

                <li class="active">

                    <a href="#">HOME</a>

                </li>

                                <li>

                    <a href="history.html">HISTORY</a>

                </li>

                <li>

                    <a href="developer.html">DEVELOPER</a>

                </li>

                <li class="dropdown">

                    <a href="tutorial.html" class="dropdown-toggle" data-toggle="dropdown">

                        TUTORIAL <b class="caret"></b>

                    </a>

                    <ul class="dropdown-menu">

                        <li>

                            <a target="_blank" href="http://www.bilibili.com/video/av1242020">VIDEO</a>

                        </li>

                        <li class="divider"></li>

                        <li>

                            <a target="_blank" href="http://cnbeining.com/?p=289">FAQ</a>

                        </li>

                    </ul>

                </li>

            </ul>

        </nav>

    </div>

</header>

参考資料:http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html.Bootstrapスクロールリスニング(Scrollspy)プラグインとBootstrap追加ナビゲーション(Affix)プラグインを組み合わせることで、ページをスクロールするときにナビゲーションバーがフォーカスを変換できます.
サンプルページhttp://v3.bootcss.com/css/

            <div id="myScrollspy" class="col-sm-4 hidden-xs">

                <ul class="nav nav-pills nav-stacked"  data-spy="affix" data-offset-top="140" role="tablist">
                <li class="active"><a href="#r20140601">2014-06-01</a></li>

                <li><a href="#r20140321">2014-03-21</a></li>

                <li><a href="#r20140129">2014-01-29</a></li>

                <li><a href="#r20131125">2013-11-25</a></li>

                <li><a href="#r20130727">2013-07-27</a></li>

                <li><a href="#r20130214">2013-02-14</a></li>

                <li><a href="#r20121017">2012-10-17</a></li>

                <li><a href="#r20120615">2012-06-15</a></li>

                <li><a href="#r20120327">2012-03-27</a></li>

                <li><a href="#r20120129">2012-01-29</a></li>

                <li><a href="#r20110826">2011-08-26</a></li>

                <li><a href="#r20110725">2011-07-25</a></li>

                </ul>

            </div>

1)dataプロパティ:傍受したい要素(通常body)にdata-spy=「scroll」を追加します.
Bootstrapを追加します.navコンポーネントの親要素のIDまたはclassのプロパティdata-target.
正常に動作するには、ページ本体にリスニングするリンクのIDに一致する要素があることを確認する必要があります.

<body data-spy="scroll" data-target="#myScrollspy">

2)スクロールバーが140画素下がる後にulを切り替えるように設定.nav-pills.affix状態.

<ul class="nav nav-pills nav-stacked"  data-spy="affix" data-offset-top="140" role="tablist">

3)スクロールバーが140ピクセル下がった後、ページ固定位置を設定する.

ul.nav-pills.affix{

top: 43px; /* Set the top position of pinned element */

}

参考資料:http://www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.html http://www.w3cschool.cc/bootstrap/bootstrap-affix-plugin.html 4.アニメは有名なアニメを使っています.cssでアニメーションを実現します.

<link href="css/animate.css" rel="stylesheet">

アニメーションが必要な要素のclassプロパティに「animated zoomIn」を追加するだけで、ページ読み込み時にアニメーションを生成できます.正確な制御時間が必要な場合は、要素のcssに追加します.

animation-delay:2s;

animation-duration:2s;

イベントにアニメーションを追加する必要がある場合はjavascriptでaddClassを使用します.jQueryコード:

$(function(){

  $("#logo").click(function()

  {

    $("#logo").removeClass("animated zoomIn");

    $("#logo").addClass("animated flip");

setTimeout(function(){

    $("#logo").removeClass("animated flip");

},2000);

  });

});

参考資料:CSSアニメーション紹介http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html.応答式は個別CSS属性の応答式を実現する必要がある場合があり,@mediaで実現する.

@media screen and (max-width: 768px) {

.titleContainer

{

width: 320px;

}

}

screenはコンピュータの画面を表し、andは論理演算子であり、max-width 768 pxは768 px以下でCSSを実現する.このコードはCSSの最後に上書きされないようにしなければならない.参考資料http://www.w3cplus.com/content/css3-media-queries http://blog.mineducks.com/archives/22 6.Web fontBootstrapフレームワークには、Web fontフォントglyphiconsが付属しており、Webページで直接使用できます.

<span class="glyphicon glyphicon-user"></span>

当駅はFont Awesomeを使ってQQと新浪微博のロゴを表示します.

<link href="css/font-awesome.min.css" rel="stylesheet">

<i class="fa fa-qq"></i>

新浪微博

<i class="fa fa-weibo"></i>

参考資料:
http://v3.bootcss.com/components/#glyphicons http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.html

7.モバイル機器閲覧時の拡大・縮小禁止

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >

8.最初の行のインデント

p{ 

text-indent: 2em; /*em ，2em */ 

}

9.HTML 5の意味化ラベル
HTML 5が出る前に、ページの章をdivで表すが、これらのdivは実際の意味がなく(例えばなど)、html 5の出現はこの規則を変えた.意味化ラベルの利点:構造がより良く、検索エンジンのキャプチャ(SEOの最適化)と開発者のメンテナンス(メンテナンス性がより高く、構造が明確で、読みやすい)に有利である.特殊端末の読み取りなどに有利です.•

ページのヘッダーは、通常、ページ全体またはコンテンツブロックのタイトルとしてh 1-h 6要素またはhgroupを含む.セクションのディレクトリセクション、検索ボックス、nav、または関連するlogoを包むこともできます.ページ全体にヘッダー要素の数は制限されず、複数を持つことができ、コンテンツブロックごとにヘッダー要素を1つ追加することができます.•のページのフッターには、通常、このセクションの基本的な情報が含まれています.例えば、著者、関連ドキュメントのリンク、著作権資料などです.footer要素にセクション全体が含まれている場合は、付録、インデックス、抜擢、ライセンスプロトコル、ラベル、カテゴリなどの他の類似情報を表します.•は、「Webページ」または「section」のタイトルを表し、要素が複数のレベルにある場合、この要素は、例えば文章のメインタイトルとサブタイトルの組み合わせなど、h 1からh 6要素をその中に置くことができる.h 1-h 6ラベルが1つ必要な場合はhgroupは使用されません.•要素は、ページのナビゲーションリンク領域を表します.ページを定義する主なナビゲーションセクション.•要素はarticle要素の主要コンテンツとしての付属情報部分に含まれており、その内容は現在の文章に関する資料、ラベル、順位解釈など(特殊なsection)であってもよい.section>要素は、ドキュメント内の「セクション」または「セグメント」を表し、「セグメント」は、文章内のトピックに従ったセグメントを指すことができる.「セクション」は、ページ内のグループを指すことができます.sectionは通常タイトルも付いていますが、html 5ではsectionが自動的にタイトルh 1-h 6を降格しますが、手動で降格したほうがいいです.article、nav、asideは特殊なsectionと理解できるので、article、nav、asideを使えばsectionは使わず、実用的でないものはdivを使う.•

要素はsectionやdivと最も混同されやすいが、実際にはarticleはドキュメント、ページ、Webサイトで独自のコンテンツを表し、開発者が独立して開発したり再利用したりすることを目的としている.例えば、フォーラムの投稿、ブログの文章、ユーザーのコメント、インタラクティブなwidgetツールなどです.(特殊なsection)その内容を除いてarticleにはタイトル(通常headerにある)があり、footerフッターがあります.articleの内部にarticleがネストされている場合は、埋め込まれたarticleが外部のコンテンツに関連付けられていることを意味します.articleの内部にsectionがネストされているため、ブラウザが各章に含まれる内容を容易に区別できます.sectionの内部にはarticleがネストされており、sectionはこれらの自立したarticleを包み、団体を構成しています.参考資料:
http://www.cnblogs.com/TomXu/archive/2011/12/08/2269043.html
http://www.html5jscss.com/?p=30

[BOJ Baekjun]-ジョセフ問題011866 Java

[Programmers]推奨新規ID(Java)