Skip to content

Commit

Permalink
Add components example
Browse files Browse the repository at this point in the history
  • Loading branch information
@windyakin
windyakin committed Feb 23, 2019
1 parent 2566f36 commit 9f8791c
Show file tree
Hide file tree
Showing 2 changed files with 223 additions and 3 deletions.
115 changes: 112 additions & 3 deletions docs/bootstrap-ja.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Expand Down Expand Up @@ -773,6 +773,16 @@ <h1 id="forms">Forms</h1>
<label class="custom-control-label" for="customCheck2">選択できない選択肢</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
<label class="custom-control-label" for="customSwitch1">トグルスイッチ</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">選択できないトグルスイッチ</label>
</div>
</div>
<div class="form-group">
<select class="custom-select">
<option selected>選択してください</option>
Expand All @@ -785,10 +795,10 @@ <h1 id="forms">Forms</h1>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
<label class="custom-file-label" for="inputGroupFile02">ファイルを選択</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="">Upload</span>
<span class="input-group-text" id="">アップロード</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -1166,6 +1176,87 @@ <h3 id="progress-animated">Animated</h3>
</div>
</section>

<!-- Spinners
================================================== -->
<section class="bs-docs-section">

<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="spinners">Spinners</h1>
</div>
</div>
</div>

<div class="row">
<div class="col-md-6 ">
<h3 id="spinners-border">Border Spinners</h3>
<div class="bs-component d-flex justify-content-around">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>

<div class="col-md-6">
<h3 id="spinners-growing">Growing spinners</h3>
<div class="bs-component d-flex justify-content-around">
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</section>

<!-- Containers
================================================== -->
<section class="bs-docs-section">
Expand Down Expand Up @@ -1472,7 +1563,25 @@ <h5 class="modal-title">タイトル</h5>
</div>
</div>
</div>

<h2>Toast</h2>
<div class="bs-component d-flex justify-content-center p-md-4">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img class="bd-placeholder-img rounded mr-2" width="20" height="20" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABN5JREFUeNrsnN1R4zAQgEUm75cOzlQQd4BTwZm3eyNUAKkgUAFQgc3bvREqwKkAUwGmA18FnBbWcxpjWyt5JYexd0aTScCW8mm1P/IqQkwySR85+o6Dfv8jIvkSyrZQPi5ky49+i3yUgBDKmWxxDUxdStky2R4lrNQLIBzcFjsvZMcbz2Cg78jictCqjRzvzrkGyYE+4OyBgBqvZMelQzCgJTeyrRlud26rTSaAAvnyqnzkDJLsCyYi0SwlUzmWYy1ML5qRSX7ePFM+AiP5hDPNpjWyAZgHZjjCVhNnhv9/X3sfon3ggPMBnGlJsYkpoKzhs0s0pH3grBFO6PC7Fs4B4TJr6mjbA86NA3vzZWJtjfTM4pqmQCxCI25qb8DWXDrUGIByKuGsbG8yt7jmRXH3qlxAzGHgwl0sKYByjhE1i3e1AdTWsYkdWigwo44vWzRMQtzlRCSYjJP4nGmJCRNtqNkyky+USe2DWCwwHJs3L0ZJC1xLV9oQHDQgFwNskL8df1seAqBiYEBdSzIcHJBNPuNRQs7Ux9ZIC58q3jBBYKi7BPLDUtGoRYMhh72iqyEALQ5Biwh/B00TFEjGgLhV2LDfEFvBYO9gd/LKhQaFnoBE2NcSg0luBxAAdF3EPRcHIggE2okQXuKpyuvm3IAWjEsmRiCx8G+/SsoTkEGWGPN+s62QEuvZECODdS8bZN3HmH3vOpJgds0RBpv4Nhp0wggKvFGKrdp2jdAwh4wOoaziH5gMk2D3YIw0AsvrRhOhBQjrhwIt0qQj11Vg6TuSjgaCtquBe++4bM+1L2Rkg4YKEi3k51DJqs4m7D1CyHzsKpgCCsTIZALEDEi3nVFOGtQt+dgBhdMSa3fxFDijXmLaGIi7PvC7AYrECMUEkC46zccOSOfByrED0i2xwvPYo4MBRKz9eRuzBlEAjXqJUdR51Eb65zfTIDZ7OOdaYi6CRLR9NnvTb74BRb60B1Oa6tBKMLQqzgkDpmyz5gxgYBJsD63UZUl5rMxlg5wmqaAxskHF6xNjbAPa9yrve+kDEEXNXyzhXMmXZ0dB38fTW6jF7vOwgQtQYQEnEUznPAjaZH3ohgJoyQ0INWft0dZan0yaEVXVCBAcTmkbDLrurfAv1Wki/0tMfdaNSyfpMO6J4Rgz8VmJAYf3jqD1gYSHZ1jjoICqPbqlg9pDMcjgFe9kS+uFBgzF6nB8a089x8pRvFAoX/5C878XhPtBTHXaUYHxi2HMiRxvRomTOOuDbgj2KiTAXmnKUziMe1XAxWKDtB4KTwzGDEHnrmtWsR/dJGSCdkBmTdnn4gAUthje3MIjxh3ejzrrUCR1T9SkLQegPUFdvxjZFk3QzWzQFK8oB34pIccOy+sKohYt+gJKLdb4rkdSCzCewSNiSzAdoeSEqtejalHcC1DDeXmKtA3ujnh9FUxuDYwyaOy18v7WoK/eXuzaAE7eVv6GsG+FG9mo3g+XeO++SIDwC1M72xBgc+8+pi1lvZS+Uq44iNLZra54Emd2xQgpxZrrrr7axnSuKwk2ymswbnhu8SZGP3aC3iMhxk/GcBr6gxTlTPw/n3FHqZc2TvxaXK71L8HgL71shdnGfCF6/i4QVawyY9SkKmPf4WB77f8i+OpwS9NJwcqbPvoAM8kkPPJPgAEAyEmTr+M2lQ0AAAAASUVORK5CYII=">
<strong class="mr-auto">Honoka</strong>
<small>11分前</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
これはToast型通知メッセージのサンプルです。
</div>
</div>
</div>
</div>

</div>
<div class="col-lg-6">
<h2>Popovers</h2>
Expand Down
111 changes: 111 additions & 0 deletions docs/bootstrap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -737,6 +737,16 @@ <h1 id="forms">Forms</h1>
<label class="custom-control-label" for="customCheck2">Disabled custom checkbox</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
</div>
<div class="form-group">
<select class="custom-select">
<option selected>Open this select menu</option>
Expand Down Expand Up @@ -1121,6 +1131,89 @@ <h3 id="progress-animated">Animated</h3>
</div>
</section>


<!-- Spinners
================================================== -->
<section class="bs-docs-section">

<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="spinners">Spinners</h1>
</div>
</div>
</div>

<div class="row">
<div class="col-md-6 ">
<h3 id="spinners-border">Border Spinners</h3>
<div class="bs-component d-flex justify-content-around">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>

<div class="col-md-6">
<h3 id="spinners-growing">Growing spinners</h3>
<div class="bs-component d-flex justify-content-around">
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</section>


<!-- Containers
================================================== -->
<section class="bs-docs-section">
Expand Down Expand Up @@ -1410,7 +1503,25 @@ <h5 class="modal-title">Modal title</h5>
</div>
</div>
</div>

<h2>Toast</h2>
<div class="bs-component d-flex justify-content-center p-md-4">
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect fill="#007aff" width="100%" height="100%"></rect></svg>
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<h2>Popovers</h2>
<div class="bs-component" style="margin-bottom: 3em;">
Expand Down

0 comments on commit 9f8791c

Please sign in to comment.