More than 5 years have passed since last update.

Twitter Bootstrapでリスト出力の入れ物を作る

Bootstrap

Posted at 2015-03-15

Twitter Bootstrap

いまさら聞けない「Twitter Bootstrap」とは？

1. Twitter Bootstrapの公式サイトからDownloadボタンをクリックし、zipファイルをダウンロード

2. 解凍したディレクトリ直下にindex.html作成

index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen, projection" />
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>　
    <meta charset="utf-8">
    <title>Webサービス開発者のためのTwitter Bootstrap入門　第1回</title>
  </head>
  <body>
    <div class="container">
      <div class="page-header">
        <h1>Webサービス開発者のためのTwitter Bootstrap入門</h1>
      </div>
      <table class="table table-striped" border="1">
        <thead>
          <tr><th>#</th><th>title</th><th>action</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td><td>sample1</td><td><button type="submit" class="btn btn-success">Submit</button></td>
          </tr>
          <tr>
            <td>2</td><td>sample2</td><td><button type="submit" class="btn btn-primary">Submit</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

出力結果はこんな感じ

index01.html.JPG

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up