forked from varia/varia.website
93 lines
2.6 KiB
Plaintext
93 lines
2.6 KiB
Plaintext
|
Overview
|
||
|
|
===============================================================================
|
||
|
|
|
||
|
|
.. lead::
|
||
|
|
|
||
|
|
Get the lowdown on the key pieces of Bootstrap's infrastructure, including
|
||
|
|
our approach to better, faster, stronger web development.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
HTML5 doctype
|
||
|
|
-------------
|
||
|
|
|
||
|
|
Bootstrap makes use of certain HTML elements and CSS properties that require
|
||
|
|
the use of the HTML5 doctype. Include it at the beginning of all your projects.
|
||
|
|
|
||
|
|
.. code:: html
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
...
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|
||
|
|
Mobile first
|
||
|
|
-------------
|
||
|
|
|
||
|
|
With Bootstrap 2, we added optional mobile friendly styles for key aspects of
|
||
|
|
the framework. With Bootstrap 3, we've rewritten the project to be mobile
|
||
|
|
friendly from the start. Instead of adding on optional mobile styles, they're
|
||
|
|
baked right into the core. In fact, **Bootstrap is mobile first**. Mobile first
|
||
|
|
styles can be found throughout the entire library instead of in separate files.
|
||
|
|
|
||
|
|
To ensure proper rendering and touch zooming, **add the viewport meta tag** to
|
||
|
|
your :code:`<head>`.
|
||
|
|
|
||
|
|
.. code:: html
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
You can disable zooming capabilities on mobile devices by adding
|
||
|
|
:code:`user-scalable=no` to the viewport meta tag. This disables zooming,
|
||
|
|
meaning users are only able to scroll, and results in your site feeling a bit
|
||
|
|
more like a native application. Overall, we don't recommend this on every site,
|
||
|
|
so use caution!
|
||
|
|
|
||
|
|
.. code:: html
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
|
|
|
||
|
|
Typography and links
|
||
|
|
--------------------
|
||
|
|
|
||
|
|
Bootstrap sets basic global display, typography, and link styles. Specifically,
|
||
|
|
we:
|
||
|
|
|
||
|
|
* Set :code:`background-color: #fff`; on the body
|
||
|
|
* Use the :code:`@font-family-base`, :code:`@font-size-base`, and
|
||
|
|
:code:`@line-height-base` attributes as our typographic base
|
||
|
|
* Set the global link color via :code:`@link-color` and apply link underlines
|
||
|
|
only on :hover
|
||
|
|
|
||
|
|
These styles can be found within :code:`scaffolding.less`.
|
||
|
|
|
||
|
|
|
||
|
|
Normalize.css
|
||
|
|
-------------
|
||
|
|
|
||
|
|
For improved cross-browser rendering, we use `Normalize.css
|
||
|
|
<http://necolas.github.io/normalize.css/>`_, a project by `Nicolas Gallagher
|
||
|
|
<https://twitter.com/necolas>`_ and `Jonathan Neal <https://twitter.com/jon_neal>`_.
|
||
|
|
|
||
|
|
|
||
|
|
Containers
|
||
|
|
----------
|
||
|
|
|
||
|
|
Easily center a page's contents by wrapping its contents in a
|
||
|
|
.container. Containers set width at various media query breakpoints to match
|
||
|
|
our grid system.
|
||
|
|
|
||
|
|
Note that, due to padding and fixed widths, containers are not nestable by
|
||
|
|
default.
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. container::
|
||
|
|
|
||
|
|
...
|