Qiitaの記事でBootstrapを利用

タグのclassがエスケープされないことを利用します。
`<button>`のものは`<div>`にします。

翻訳の自信がないので英語のままです:weary:

- 目次
 - [CSS](#css)
 - [Components](#components)
 - [JavaScript](#javascript)

# CSS
- [CSS - Bootstrap](http://getbootstrap.com/css/)

## Typography

### Alignment classes
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

```html
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
```

### Transformation classes
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

```html
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
```

## Code

### Inline
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

```html
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
```

### User input
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

```html
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
```

## Table
<table class="table table-hover">
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
</table>

```html
<table class="table table-hover">
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
</table>
```

<table class="table table-hover">
  <tr class="active"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="success"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="warning"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="danger"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="info"><td>a</td><td>b</td><td>c</td></tr>
</table>

```html
<table class="table table-hover">
  <tr class="active"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="success"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="warning"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="danger"><td>a</td><td>b</td><td>c</td></tr>
  <tr class="info"><td>a</td><td>b</td><td>c</td></tr>
</table>
```

## Button
<div type="button" class="btn btn-default">Default</div>
<div type="button" class="btn btn-primary">Primary</div>
<div type="button" class="btn btn-success">Success</div>
<div type="button" class="btn btn-info">Info</div>
<div type="button" class="btn btn-warning">Warning</div>
<div type="button" class="btn btn-danger">Danger</div>

## Helper classes

### Contextual colors
<span class="text-muted">muted</span>
<span class="text-primary">primary</span>
<span class="text-success">success</span>
<span class="text-info">info</span>
<span class="text-warning">warning</span>
<span class="text-danger">danger</span>

```html
<span class="text-muted">muted</span>
<span class="text-primary">primary</span>
<span class="text-success">success</span>
<span class="text-info">info</span>
<span class="text-warning">warning</span>
<span class="text-danger">danger</span>
```

### Contextual backgrounds
<span class="bg-primary">primary</span>
<span class="bg-success">success</span>
<span class="bg-info">info</span>
<span class="bg-warning">warning</span>
<span class="bg-danger">danger</span>

```html
<span class="bg-primary">primary</span>
<span class="bg-success">success</span>
<span class="bg-info">info</span>
<span class="bg-warning">warning</span>
<span class="bg-danger">danger</span>
```

# Components
- [Components - Bootstrap](http://getbootstrap.com/components/)

## Dropdown
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

```html
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
```


## Button group

<div class="btn-group" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>

```html
<div class="btn-group" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>
```

<div class="btn-group btn-group-xs" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>

```html
<div class="btn-group btn-group-xs" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>
```

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>

```html
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div type="button" class="btn btn-default">Left</div>
  <div type="button" class="btn btn-default">Middle</div>
  <div type="button" class="btn btn-default">Right</div>
</div>
```

## Breadcrumbs
沢山の記事をまとめたいときに便利ですね。

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
```html
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
```

## Pagination
記事を分けて書くときに便利ですね。

<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>

```html
<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>
```

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

```html
<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
```

## Label
<h3>Example heading <span class="label label-default">New</span></h3>

```html
<h3>Example heading <span class="label label-default">New</span></h3>
```

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

```html
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
```


## Badge
<div class="btn btn-default" type="button">
  Messages <span class="badge">4</span>
</div>

```html
<div class="btn btn-default" type="button">
  Messages <span class="badge">4</span>
</div>
```

## Jumbotron
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>jumbotron</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

```html
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>jumbotron</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
```

## Alert
<div class="alert alert-success" role="alert">success</div>
<div class="alert alert-info" role="alert">info</div>
<div class="alert alert-warning" role="alert">warning</div>
<div class="alert alert-danger" role="alert">danger</div>

```html
<div class="alert alert-success" role="alert">success</div>
<div class="alert alert-info" role="alert">info</div>
<div class="alert alert-warning" role="alert">warning</div>
<div class="alert alert-danger" role="alert">danger</div>
```

## List group
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

```html
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
```

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    Morbi leo risus
  </li>
</ul>

```html
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
    <span class="badge">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
    <span class="badge">1</span>
    Morbi leo risus
  </li>
</ul>
```

## Panel
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

```html
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
```

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

```html
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
```


# JavaScript
[JavaScript - Bootstrap](http://getbootstrap.com/javascript/)

## Modal
クリックするとモーダルウィンドウが開きます
<div type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <div type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></div >
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Test</p>
      </div>
      <div class="modal-footer">
        <div  type="button" class="btn btn-default" data-dismiss="modal">Close</div >
      </div>
    </div>
  </div>
</div>

```html
<div type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <div type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></div >
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Test</p>
      </div>
      <div class="modal-footer">
        <div  type="button" class="btn btn-default" data-dismiss="modal">Close</div >
      </div>
    </div>
  </div>
</div>
```

## Nav
例はTabです。Pillも同様です。
ソースコードをHTML, CSS, JSに分けて表示したい時に使えそうですね。

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Test</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Test</div>
    <div role="tabpanel" class="tab-pane" id="messages">Message Test</div>
    <div role="tabpanel" class="tab-pane" id="settings">Setting Test</div>
  </div>

</div>

```html
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Test</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Test</div>
    <div role="tabpanel" class="tab-pane" id="messages">Message Test</div>
    <div role="tabpanel" class="tab-pane" id="settings">Setting Test</div>
  </div>

</div>
```

## Tooltip
マウスホバーでツールチップを表示します。

<div type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</div>

```html
<div type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</div>
```

## Collapse
クリックすると表示されます。

<div class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</div>
<div class="collapse" id="collapseExample">
  <div class="well">
    Collapse Test
  </div>
</div>

```html
<div class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</div>
<div class="collapse" id="collapseExample">
  <div class="well">
    Collapse Test
  </div>
</div>
```


# まとめ
修正が来たらすみません。

# 余談
これに関連してXSSの脆弱性を見つけたので運営に報告しました。
classの指定ができなくなるかもしれません。