bootstrapの概要

2824 ワード
エクスプローラ タブレット デスクトップ
bootstrapの歴史
2011年、twitterの「一握り」エンジニアは、内部の分析と管理能力を高めるために、余暇を使って製品のために使いやすく、優雅で、柔軟で、拡張性のあるフロントエンドツールセット--BootStrapを構築しました.BootstrapはMARK OTTOとJacob Thorntonによって設計され、構築され、github上でオープンソースした後、急速に同駅で最も多くのwatch&forkのプロジェクトとなった.多くのエンジニアがこのプロジェクトに貢献するコードは、コミュニティが驚くほど活発で、コードバージョンの進化が非常に速く、公式ドキュメントの品質が極めて高い(優雅と言える)と同時に、Bootstrapに基づいて建設された多くのウェブサイトが現れた:インタフェースが清新で、簡潔である;要素のレイアウトがすっきりしている
bootstrapの利点
  • 使いやすい:HTMLとCSSの基礎知識さえあれば、Bootstrap
    • の使用を学ぶことができます.
  • ブラウザサポート:すべての主流ブラウザ
    • をサポート
  • モバイルデバイス優先:Bootstrap 3以降、フレームワークは、ライブラリ全体にわたるモバイルデバイス優先のスタイル
    • を含む.
  • 応答式設計:Bootstrapの応答式CSSはデスクトップ、タブレット、携帯電話
    • に適応できる.
  • は、アーキテクチャが流行しているユーザーインタフェースとインタラクティブインタフェースのhtml、css、javascriptツールセットに簡単で柔軟に使用できます.
  • カスタムJQueryプラグイン、完全なクラスライブラリ、Lessなど
    • に基づく
  • は、Webベースのカスタム
    • を提供する.
  • bootstrapはオープンソースの
    • です
    基本的なHTMLテンプレート
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap HTML </title>   
        <!--  Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--  -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!--  IE8 HTML5 ，  -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello,  </h1>
         <!--  Bootstrap js ， jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!--  bootstrap js js 　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

    グローバルスタイル
    Webページを作成するとき、フロントエンドの人はウェブサイトにグローバルスタイル(reset.css)を設定することに慣れています.ではBootstrapフレームワークでも例外ではありません.Bootstrapフレームワークの核心は軽量のCSSベースコードライブラリで、彼はひたすらスタイルをリセットするのではなく、各ブラウザのベース表現を重視し、開発の難易度を下げた.ほとんどのフロントエンドのスタッフはゼロに戻る考えを持っていますが、実際には、ゼロに戻ったスタイルは開発過程で潜在的な問題があることがわかります.例えば、グローバルスタイルシートでemを普通のマークに変えて、斜体であるべきなのに、どうして効果がないのでしょうか.
    Bootstrapフレームワークはこの部分で一定の変更を行い、ゼロに戻ることを追求するのではなく、問題が発生する可能性のあるスタイル(body、formのmarginなど)をリセットすることを重視し、一部のブラウザの基礎スタイルを保留し、堅持し、一部の潜在的な問題を解決し、細部の体験を向上させることを具体的に説明します.
  • bodyを除去するmargin宣言
  • bodyの背景色を白
    • に設定.
  • は、基本的なフォント、フォント、行の高さ
    • をレイアウトに設定する.
  • グローバルリンクの色を設定し、リンクが浮遊状態である場合に下線スタイル
    • が表示されます.
    Pythonで他の言語と異なる変数[Python]
    選択の位置合わせ、挿入の位置合わせ