Bootstrap demo

index.html

<!-- Copyright 2015 the Dart project authors. All rights reserved.
     Use of this source code is governed by a BSD-style license
     that can be found in the LICENSE file. -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script -->

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
      </a>
      <p class="navbar-text navbar-right">Bootstrap demo</p>
    </div>
  </div>
</nav>

<div id="main-container" class="container">
  <div class="row">
    <div class="alert alert-info" role="alert">
      <b>Super important</b>
      alert here!
    </div>
  </div>
  
  <div class="row">
    <button class="btn btn-primary" type="submit">Buttons</button>
    <button class="btn btn-default" type="submit">Are</button>
    <button class="btn btn-default" type="submit">Fun</button>    
  </div>

  <div class="row">
    <nav>
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  
  <div class="row">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

main.dart

// Copyright 2015 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'dart:html';

void main() {
  for (Element e in querySelectorAll('a, button')) {
    e.onClick.listen((e) => handleClick(e.target));
  }
}

void handleClick(var element) {
  print('[${element.text.trim()}]');
}

styles.css

/* Copyright 2015 the Dart project authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style license */
/* that can be found in the LICENSE file. */

#main-container {
  margin-left: 15px;
  margin-right: 15px;
}