forked from olton/Metro-UI-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
display.html
198 lines (179 loc) · 10.2 KB
/
display.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Display and visibility - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav">
</div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Common</a></li>
<li class="toc-entry"><a href="#_display">Display</a></li>
<li class="toc-entry"><a href="#_display_touch">Touch or not touch</a></li>
<li class="toc-entry"><a href="#_visibility">Visibility</a></li>
<li class="toc-entry"><a href="#_print">Print</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Display and Visibility</h1>
<p class="text-leader">
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
</p>
<!-- ads-html -->
<h3 id="_display">Display</h3>
<p>
The display property accepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:
</p>
<ul>
<li><code>.d-none</code></li>
<li><code>.d-block</code></li>
<li><code>.d-inline</code></li>
<li><code>.d-inline-block</code></li>
<li><code>.d-table</code></li>
<li><code>.d-table-row</code></li>
<li><code>.d-table-cell</code></li>
<li><code>.d-flex</code></li>
<li><code>.d-inline-flex</code></li>
</ul>
<p>
Put them to use by applying any of the classes to an element of your choice. For example, here’s how you could use the inline, block, or inline-block utilities (the same applies to the other classes).
</p>
<div class="example pt-3 pb-3">
<div class="d-inline p-2 bg-green fg-white">d-inline</div>
<div class="d-inline p-2 bg-yellow fg-dark">d-inline</div>
<div class="d-inline p-2 bg-red fg-white">d-inline</div>
</div>
<pre class=""><code>
<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>
</code></pre>
<p>
Responsive variations also exist for every single utility mentioned above with specify suffix.
</p>
<ul>
<li><code>.d-none-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-block-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-inline-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-inline-block-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-table-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-table-row-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-table-cell-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-flex-[sm | md | lg | xl | xxl]</code></li>
<li><code>.d-inline-flex-[sm | md | lg | xl | xxl]</code></li>
</ul>
<p class="text-small text-muted">
* Remember! Responsive utilities works with <code>min-width</code> option.
</p>
<h3 id="_display_touch">Touch & no-Touch</h3>
<p>
You can specify display property depending on the touch or not touch device.
To specify this behavior use classes:
</p>
<h6>For touch</h6>
<ul>
<li><code>.d-none-touch</code></li>
<li><code>.d-block-touch</code></li>
<li><code>.d-inline-touch</code></li>
<li><code>.d-inline-block-touch</code></li>
<li><code>.d-table-touch</code></li>
<li><code>.d-table-row-touch</code></li>
<li><code>.d-table-cell-touch</code></li>
<li><code>.d-flex-touch</code></li>
<li><code>.d-inline-flex-touch</code></li>
</ul>
<h6>For no touch</h6>
<ul>
<li><code>.d-none-no-touch</code></li>
<li><code>.d-block-no-touch</code></li>
<li><code>.d-inline-no-touch</code></li>
<li><code>.d-inline-block-no-touch</code></li>
<li><code>.d-table-no-touch</code></li>
<li><code>.d-table-row-no-touch</code></li>
<li><code>.d-table-cell-no-touch</code></li>
<li><code>.d-flex-no-touch</code></li>
<li><code>.d-inline-flex-no-touch</code></li>
</ul>
<h3 id="_visibility">Visibility</h3>
<p>
To change element visibility add class <code>.visible</code> or <code>.no-visible</code> to element. Responsive variations also exist for every single utility mentioned above with specify suffix.
</p>
<ul>
<li><code>.visible</code></li>
<li><code>.no-visible</code></li>
<li><code>.visible-[sm | md | lg | xl | xxl]</code></li>
<li><code>.no-visible-[sm | md | lg | xl | xxl]</code></li>
</ul>
<p class="text-small text-muted">
* Remember! Responsive utilities works with <code>min-width</code> option.
</p>
<h3 id="_print">Print</h3>
<p>
Change the <code>display</code> and <code>visibility</code> value of elements when printing with our print display utilities.
</p>
<ul>
<li><code>.d-none-print</code></li>
<li><code>.d-block-print</code></li>
<li><code>.d-inline-print</code></li>
<li><code>.d-inline-block-print</code></li>
<li><code>.d-table-print</code></li>
<li><code>.d-table-row-print</code></li>
<li><code>.d-table-cell-print</code></li>
<li><code>.d-flex-print</code></li>
<li><code>.d-inline-flex-print</code></li>
</ul>
<p>
Display print utilities defined inside the:
</p>
<pre class=""><code>
@media print {
...
}
</code></pre>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
</body>
</html>