blob: c2df1aca923bd8e91f533480ebe32f1f35ec5278 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<div id="icons">
<div class="hero py-5">
<div class="container">
<h1 class="f0">Bootstrap Icons</h1>
<p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p>
<div class="row text-muted">
<div class="col">
<p>Bootstrap Icons are designed first and foremost to work with <a href="{{ .Site.Params.main }}">Bootstrap</a> components, from form controls to navigation and more. Bootstrap Icons are SVGs, so they scale quickly and easily to any size and can be styled with CSS.</p>
</div>
<div class="col">
<p>Plus, while they're built for Bootstrap first, they're great for any project. They're open sourced (MIT), so you're free to download, use, and extend.</p>
</div>
<div class="col-md-3 col-lg-4">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<hr class="my-4">
<p class="text-muted">
Current version: <strong>v{{ .Site.Params.package_version }}</strong> <small class="py-1 px-2 font-weight-bold text-white bg-primary rounded">Alpha</small>
<span class="px-2">•</span>
<a href="{{ .Site.Params.package_repo }}">GitHub repo</a>
</p>
</div>
</div>
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
<div class="container d-flex align-items-md-center py-2">
<label for="search" class="sr-only">Search for icons</label>
<input class="form-control search mr-2" id="search" placeholder="Start typing to filter..." autofocus>
<button class="btn btn-bd-primary sort text-nowrap" data-sort="icon-name">
Search
</button>
</div>
</nav>
<div class="container my-5">
{{ partial "icons-list" . }}
</div>
</div>
<div class="container">
<h2 id="usage">Usage</h2>
<button class="btn btn-primary mb-4" type="button">
{{ readFile "icons/house-fill.svg" | safeHTML }}
Back home
</button>
<div class="btn-group mb-4">
<button class="btn btn-primary active" type="button">
{{ readFile "icons/house-fill.svg" | safeHTML }}
<span class="sr-only">Back home</span>
</button>
<button class="btn btn-primary" type="button">
{{ readFile "icons/gear.svg" | safeHTML }}
<span class="sr-only">Settings</span>
</button>
<button class="btn btn-primary" type="button">
{{ readFile "icons/star-outline.svg" | safeHTML }}
<span class="sr-only">Starred</span>
</button>
</div>
<div class="list-group mb-4 mx-auto">
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Item with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch1" checked>
<label class="sr-only" for="playgroundSwitch1">Switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Another with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch2">
<label class="sr-only" for="playgroundSwitch2">Another switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Choose an option</div>
<div class="d-flex align-items-center ml-auto">
<span class="text-muted">Selected</span>
{{ readFile "icons/chevron-right.svg" | safeHTML }}
</div>
</div>
</div>
<div class="list-group mb-4 mx-auto">
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Item with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch3" checked>
<label class="sr-only" for="playgroundSwitch3">Switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Another with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch4">
<label class="sr-only" for="playgroundSwitch4">Another switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Choose an option</div>
<div class="d-flex align-items-center ml-auto">
<span class="text-muted">Selected</span>
{{ readFile "icons/chevron-right.svg" | safeHTML }}
</div>
</div>
</div>
</div>
|
