Bootstrap4がいい感じ

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

まだα版だけど、いい感じ。

スクリーンショット 2016-02-11 3.03.30

 

使い方は省略するとして、これだけのコードでこんなに綺麗。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    
    

    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    
    

    <title></title>
</head>
<body>

<nav class="navbar navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>


<div class="container-fluid">

    <div class="col-md-3">
        <div class="list-group">
  <a href="#" class="list-group-item disabled">イベント1</a>
  <a href="#" class="list-group-item">イベント1-1</a>
  <a href="#" class="list-group-item">イベント1-2</a>
  <a href="#" class="list-group-item">イベント1-3</a>
  <a href="#" class="list-group-item">イベント1-4</a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item disabled">イベント2</a>
  <a href="#" class="list-group-item">イベント2-1</a>
  <a href="#" class="list-group-item">イベント2-2</a>
  <a href="#" class="list-group-item">イベント2-3</a>
  <a href="#" class="list-group-item">イベント2-4</a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item disabled">イベント3</a>
  <a href="#" class="list-group-item">イベント3-1</a>
  <a href="#" class="list-group-item">イベント3-2</a>
  <a href="#" class="list-group-item">イベント3-3</a>
  <a href="#" class="list-group-item">イベント3-4</a>
</div>
    </div>
    <div class="col-md-9">
        
<table class="table">
    <thead>
        <tr>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
    
        
    </div>
</div>
</body>
</html>

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です