先端技術Bootstrapのhello world

8843 ワード
先端技術Bootstrapのhello world 2014-10-07 13:37 by虫師、4258読書、6コメント、コレクション、編集
-ユーザーにとって、インタフェースはプログラムそのものです.では、きれいなwebはあなたがこのアプリケーションを使い続ける前の問題に違いありません.
この節では、Bootstrapのhello wroldを書きましょう.
Bootstrap
Bootstrapは最も人気のあるHTML、CSS、JSフレームワークであり、応答型レイアウト、モバイルデバイス優先のWEBプロジェクトの開発に用いられる.
Bootstrapの使い方
Bootstrapの使用には一般的に2つの方法があります.1つはオンラインのBootstrapを参照するスタイルで、1つはBootstrapをローカルにダウンロードして参照することです.
オンラインスタイルを参照:
オンラインスタイルを参照するメリットは、Bootstrapをローカルにインストールする必要がなく、参照時のパスの問題も考慮しないことです.欠点は性能の問題を心配して、いったんオンラインスタイルが切れたら、自分のウェブサイトのページスタイルも乱れてしまいます.
http://v3.bootcss.com/getting-started/#download
Bootstrap中国語網はBootstrapのために独自の無料CDN加速サービスを構築した.
使用方法は非常に簡単です.
<meta charset="utf-8">
<title>Hello Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>hello Bootstrap<h1>
</body>

この行はオンラインのスタイルを導入しました.なお、本明細書では現在最新のBootstrap 3を用いる.2.0.
ローカルのBootstrapを使用
Bootstrapをローカルにダウンロードして解凍し、解凍が完了すると、Bootstrapディレクトリが得られます.構造は以下の通りです.
bootstrap/├── css/│ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/│ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

ローカルコールは次のとおりです.
<meta charset="utf-8">
<title>Hello Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
<style type='text/css'>
  body {
    background-color: #CCC;
  }
</style>
</head>
<body>
    <h1>hello Bootstrap<h1>
</body>

-現在のディレクトリに導入されているBootstrapスタイルを示します.
-絶対パスも使用できます.
背景色の効果を追加しました.
次はBootstrapのスタイルを利用してウェブサイトを作成します.
ナビゲーションバーとログインボックスの追加
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">  </a>
      <a class="navbar-brand" href="#">  </a>
      <a class="navbar-brand" href="#">  </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" role="form">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

ブラウザの効果は次のとおりです.
記事を追加
<div class="jumbotron">
  <div id='content' class='row-fluid'>
    <h2>Hello, world!</h2>
    <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">     »</a></p>
  </div>
</div>

ブラウザの効果は次のとおりです.
下の紹介と友情リンクを追加
About
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Elsewhere
  • ブログ園
  • 開源中国
  • infoq

    • 最終的な効果は次のとおりです.
    完全なコード:
    <meta charset="utf-8">
<title>Hello Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
<style type='text/css'>
  body {
    background-color: #CCC;
  }
</style>
</head>
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">  </a>
      <a class="navbar-brand" href="#">  </a>
      <a class="navbar-brand" href="#">  </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" role="form">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

<div class="jumbotron">
  <div id='content' class='row-fluid'>
    <h2>Hello, world!</h2>
    <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" role="button">     »</a></p>
  </div>
</div>


<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
      <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
      </div>
      <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">   </a></li>
          <li><a href="#">    </a></li>
          <li><a href="#">infoq</a></li>
        </ol>
      </div>
</div>

</body>

    スタイルの継承
    あなたはきっと好奇心を持っています.これらのスタイルはどうやって游んでいますか.どのようにdivラベルのclass属性に注意深く気づくか.
    クラスの属性値でBootstrapのスタイル定義を継承すると、あるスタイル効果が得られます.
    <meta charset="utf-8" /> 
<title>     </title>
<!--        -->
<style> 
    .divcss5-right{width:320px; height:120px;border:1px solid #F00;float:right}
</style> 

    <!--class         --> 
<div class="divcss5-right">
    <h4>    ：</h4>
        <ol class="list-unstyled">
          <li><a href="#">   </a></li>
          <li><a href="#">    </a></li>
          <li><a href="#">infoq</a></li>
        </ol>
</div>

    フロントエンドで遊ぶのは、中の属性や情報を絶えず修正し、ブラウザの展示効果を見ることです.
    基本アルゴリズム-』クイックソート(c++実装)
    WindowsでGitBashを使用してテキストファイルを一括変換し、テキスト行を一括追加