Posted at

Qiitaの記事でBootstrapを利用

More than 3 years have passed since last update.

タグのclassがエスケープされないことを利用します。

<button>のものは<div>にします。

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


CSS


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


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>


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

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



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


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