]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Reboot | |
4 | description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css. | |
5 | group: content | |
6 | redirect_from: "/content/" | |
7 | --- | |
8 | ||
9 | Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. | |
10 | ||
11 | Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. | |
12 | ||
13 | ## Contents | |
14 | ||
15 | * Will be replaced with the ToC, excluding the "Contents" header | |
16 | {:toc} | |
17 | ||
18 | ## Approach | |
19 | ||
20 | Here are our guidelines and reasons for choosing what to override in Reboot: | |
21 | ||
22 | - Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. | |
23 | - Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. | |
24 | - For easier scaling across device sizes, block elements should use `rem`s for `margin`s. | |
25 | - Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. | |
26 | ||
27 | ## Page defaults | |
28 | ||
29 | The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: | |
30 | ||
31 | - The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. | |
32 | - A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queries. | |
33 | - The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. | |
34 | - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. | |
35 | ||
36 | ## Native font stack | |
37 | ||
38 | The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a "native font stack" for optimum text rendering on every device and OS. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/). | |
39 | ||
40 | {% highlight sass %} | |
41 | $font-family-sans-serif: | |
42 | // Safari for OS X and iOS (San Francisco) | |
43 | -apple-system, | |
44 | // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android | |
45 | system-ui, | |
46 | // Chrome < 56 for OS X (San Francisco) | |
47 | BlinkMacSystemFont, | |
48 | // Windows | |
49 | "Segoe UI", | |
50 | // Android | |
51 | "Roboto", | |
52 | // Basic web fallback | |
53 | "Helvetica Neue", Arial, sans-serif !default; | |
54 | {% endhighlight %} | |
55 | ||
56 | This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. | |
57 | ||
58 | ## Headings and paragraphs | |
59 | ||
60 | All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. | |
61 | ||
62 | <div class="bd-example"> | |
63 | {% markdown %} | |
64 | # h1 heading | |
65 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
66 | ||
67 | ## h2 heading | |
68 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
69 | ||
70 | ### h3 heading | |
71 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
72 | ||
73 | #### h4 heading | |
74 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
75 | ||
76 | ##### h5 heading | |
77 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
78 | ||
79 | ###### h6 heading | |
80 | Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. | |
81 | {% endmarkdown %} | |
82 | </div> | |
83 | ||
84 | ## Lists | |
85 | ||
86 | All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. | |
87 | ||
88 | <div class="bd-example"> | |
89 | {% markdown %} | |
90 | * Lorem ipsum dolor sit amet | |
91 | * Consectetur adipiscing elit | |
92 | * Integer molestie lorem at massa | |
93 | * Facilisis in pretium nisl aliquet | |
94 | * Nulla volutpat aliquam velit | |
95 | * Phasellus iaculis neque | |
96 | * Purus sodales ultricies | |
97 | * Vestibulum laoreet porttitor sem | |
98 | * Ac tristique libero volutpat at | |
99 | * Faucibus porta lacus fringilla vel | |
100 | * Aenean sit amet erat nunc | |
101 | * Eget porttitor lorem | |
102 | ||
103 | 1. Lorem ipsum dolor sit amet | |
104 | 2. Consectetur adipiscing elit | |
105 | 3. Integer molestie lorem at massa | |
106 | 4. Facilisis in pretium nisl aliquet | |
107 | 5. Nulla volutpat aliquam velit | |
108 | 6. Faucibus porta lacus fringilla vel | |
109 | 7. Aenean sit amet erat nunc | |
110 | 8. Eget porttitor lorem | |
111 | {% endmarkdown %} | |
112 | </div> | |
113 | ||
114 | For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**. | |
115 | ||
116 | <div class="bd-example"> | |
117 | {% markdown %} | |
118 | <dl> | |
119 | <dt>Description lists</dt> | |
120 | <dd>A description list is perfect for defining terms.</dd> | |
121 | <dt>Euismod</dt> | |
122 | <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> | |
123 | <dd>Donec id elit non mi porta gravida at eget metus.</dd> | |
124 | <dt>Malesuada porta</dt> | |
125 | <dd>Etiam porta sem malesuada magna mollis euismod.</dd> | |
126 | </dl> | |
127 | {% endmarkdown %} | |
128 | </div> | |
129 | ||
130 | ## Preformatted text | |
131 | ||
132 | The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`. | |
133 | ||
134 | <div class="bd-example"> | |
135 | {% markdown %} | |
136 | <pre> | |
137 | .example-element { | |
138 | margin-bottom: 1rem; | |
139 | } | |
140 | </pre> | |
141 | {% endmarkdown %} | |
142 | </div> | |
143 | ||
144 | ## Tables | |
145 | ||
146 | Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/). | |
147 | ||
148 | <div class="bd-example"> | |
149 | <table> | |
150 | <caption> | |
151 | This is an example table, and this is its caption to describe the contents. | |
152 | </caption> | |
153 | <thead> | |
154 | <tr> | |
155 | <th>Table heading</th> | |
156 | <th>Table heading</th> | |
157 | <th>Table heading</th> | |
158 | <th>Table heading</th> | |
159 | </tr> | |
160 | </thead> | |
161 | <tbody> | |
162 | <tr> | |
163 | <td>Table cell</td> | |
164 | <td>Table cell</td> | |
165 | <td>Table cell</td> | |
166 | <td>Table cell</td> | |
167 | </tr> | |
168 | <tr> | |
169 | <td>Table cell</td> | |
170 | <td>Table cell</td> | |
171 | <td>Table cell</td> | |
172 | <td>Table cell</td> | |
173 | </tr> | |
174 | <tr> | |
175 | <td>Table cell</td> | |
176 | <td>Table cell</td> | |
177 | <td>Table cell</td> | |
178 | <td>Table cell</td> | |
179 | </tr> | |
180 | </tbody> | |
181 | </table> | |
182 | </div> | |
183 | ||
184 | ## Forms | |
185 | ||
186 | Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: | |
187 | ||
188 | - `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. | |
189 | - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts. | |
190 | - `<label>`s are set to `display: inline-block` to allow `margin` to be applied. | |
191 | - `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. | |
192 | - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout. | |
193 | ||
194 | These changes, and more, are demonstrated below. | |
195 | ||
196 | <form class="bd-example"> | |
197 | <fieldset> | |
198 | <legend>Example legend</legend> | |
199 | ||
200 | <p> | |
201 | <label for="input">Example input</label> | |
202 | <input type="text" id="input" placeholder="Example input"> | |
203 | </p> | |
204 | ||
205 | <p> | |
206 | <label for="select">Example select</label> | |
207 | <select id="select"> | |
208 | <option value="">Choose...</option> | |
209 | <optgroup label="Option group 1"> | |
210 | <option value="">Option 1</option> | |
211 | <option value="">Option 2</option> | |
212 | <option value="">Option 3</option> | |
213 | </optgroup> | |
214 | <optgroup label="Option group 2"> | |
215 | <option value="">Option 4</option> | |
216 | <option value="">Option 5</option> | |
217 | <option value="">Option 6</option> | |
218 | </optgroup> | |
219 | </select> | |
220 | </p> | |
221 | ||
222 | <p> | |
223 | <label> | |
224 | <input type="checkbox" value=""> | |
225 | Check this checkbox | |
226 | </label> | |
227 | </p> | |
228 | ||
229 | <p> | |
230 | <label> | |
231 | <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> | |
232 | Option one is this and that | |
233 | </label> | |
234 | <label> | |
235 | <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> | |
236 | Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. | |
237 | </label> | |
238 | <label> | |
239 | <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> | |
240 | Option three is disabled | |
241 | </label> | |
242 | </p> | |
243 | ||
244 | <p> | |
245 | <label for="textarea">Example textarea</label> | |
246 | <textarea id="textarea" rows="3"></textarea> | |
247 | </p> | |
248 | ||
249 | <p> | |
250 | <label for="time">Example temporal</label> | |
251 | <input type="datetime-local" id="time"> | |
252 | </p> | |
253 | ||
254 | <p> | |
255 | <label for="output">Example output</label> | |
256 | <output name="result" id="output">100</output> | |
257 | </p> | |
258 | ||
259 | <p> | |
260 | <button type="submit">Button submit</button> | |
261 | <input type="submit" value="Input submit button"> | |
262 | <input type="button" value="Input button"> | |
263 | </p> | |
264 | ||
265 | <p> | |
266 | <button type="submit" disabled>Button submit</button> | |
267 | <input type="submit" value="Input submit button" disabled> | |
268 | <input type="button" value="Input button" disabled> | |
269 | </p> | |
270 | </fieldset> | |
271 | </form> | |
272 | ||
273 | ## Misc elements | |
274 | ||
275 | ### Address | |
276 | ||
277 | The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`. | |
278 | ||
279 | <div class="bd-example"> | |
280 | <address> | |
281 | <strong>Twitter, Inc.</strong><br> | |
282 | 1355 Market St, Suite 900<br> | |
283 | San Francisco, CA 94103<br> | |
284 | <abbr title="Phone">P:</abbr> (123) 456-7890 | |
285 | </address> | |
286 | ||
287 | <address> | |
288 | <strong>Full Name</strong><br> | |
289 | <a href="mailto:#">first.last@example.com</a> | |
290 | </address> | |
291 | </div> | |
292 | ||
293 | ### Blockquote | |
294 | ||
295 | The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. | |
296 | ||
297 | <div class="bd-example"> | |
298 | <blockquote class="blockquote"> | |
299 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | |
300 | <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> | |
301 | </blockquote> | |
302 | </div> | |
303 | ||
304 | ### Inline elements | |
305 | ||
306 | The `<abbr>` element receives basic styling to make it stand out amongst paragraph text. | |
307 | ||
308 | <div class="bd-example"> | |
309 | Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. | |
310 | </div> | |
311 | ||
312 | ## HTML5 `[hidden]` attribute | |
313 | ||
314 | HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](http://purecss.io), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden. While `[hidden]` isn't natively supported by IE10, the explicit declaration in our CSS gets around that problem. | |
315 | ||
316 | {% highlight html %} | |
317 | <input type="text" hidden> | |
318 | {% endhighlight %} | |
319 | ||
320 | {% callout warning %} | |
321 | #### jQuery incompatibility | |
322 | ||
323 | `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. | |
324 | {% endcallout %} | |
325 | ||
326 | To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/utilities/invisible-content/) instead. | |
327 | ||
328 | ## Click delay optimization for touch | |
329 | ||
330 | Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a "tap" – the moment when a finger/stylus is lifted from screen – and the [`click` event](https://developer.mozilla.org/en-US/docs/Web/Events/click) being fired. This delay is necessary for these browsers to correctly handle "double-tap to zoom" gestures without prematurely triggering actions or links after the first "tap", but it can make your site feel slightly sluggish and unresponsive. | |
331 | ||
332 | Most mobile browsers automatically optimize away this 300ms delay for sites that use the `width=device-width` property as part of their [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) (as well as for sites that disable zooming, for instance with `user-scalable=no`, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) [prior to iOS 9.3](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/). | |
333 | ||
334 | On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with "double-tap to zoom" functionality. As the [responsive meta tag]({{ site.baseurl }}/getting-started/introduction/#responsive-meta-tag) is ignored by all desktop browsers, using `width=device-width` will have no effect on the 300ms delay here. | |
335 | ||
336 | To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the [`touch-action:manipulation` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay. | |
337 | ||
338 | In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay. | |
339 | ||
340 | For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay). |