Qiitaの記事でBootstrapを利用

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

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

• 目次
  • CSS
  • Components
  • JavaScript

CSS

• CSS - Bootstrap

Typography

Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<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

Lowercased text.

Uppercased text.

Capitalized text.

<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, <section> should be wrapped as inline.

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

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

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

a	b	c
a	b	c
a	b	c
a	b	c
a	b	c

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

a	b	c
a	b	c
a	b	c
a	b	c
a	b	c

<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

Default

Primary

Success

Info

Warning

Danger

Helper classes

Contextual colors

muted
primary
success
info
warning
danger

<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

primary
success
info
warning
danger

<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

Dropdown

Dropdown

• Action
• Another action
• Something else here
• Separated link

<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

Left

Middle

Right

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

Left

Middle

Right

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

Left

Middle

Right

<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

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

1. Home
2. Library
3. Data

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

Pagination

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

• «
• 1
• 2
• 3
• 4
• 5
• »

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

• Previous
• Next

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

Label

Example heading New

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

DefaultPrimarySuccessInfoWarningDanger

<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

Messages 4

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

Jumbotron

Hello, world!

jumbotron

Learn more

<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

success

info

warning

danger

<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

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

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

• 14 Cras justo odio
• 2 Dapibus ac facilisis in
• 1 Morbi leo risus

<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

Panel title

Panel content

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

Panel title

Panel content

<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

Modal

クリックするとモーダルウィンドウが開きます

Small modal

×

Modal title

Modal Test

Close

<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に分けて表示したい時に使えそうですね。

• Home
• Profile
• Messages
• Settings

Home Test

Profile Test

Message Test

Setting Test

<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

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

Tooltip on top

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

Collapse

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

Button with data-target

Collapse Test

<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の指定ができなくなるかもしれません。