YouTip

In this chapter, we will explain the key parts of Bootstrap's underlying structure, including our best practices for making web development better, faster, and stronger. Bootstrap uses some HTML5 elements and CSS properties. To make these work properly, you need to use the HTML5 document type (Doctype). Therefore, please include the following code snippet at the beginning of your Bootstrap project. .... If you do not use the HTML5 document type (Doctype) at the beginning of a webpage created with Bootstrap, you may face some browser display inconsistencies, and even specific inconsistencies in certain situations, which may cause your code to fail W3C standard validation. Mobile-first is the most significant change in Bootstrap 3. In previous versions of Bootstrap (up to 2.x), you needed to manually reference another CSS file to make the entire project mobile-friendly. This is no longer the case. Bootstrap 3's default CSS itself provides mobile-friendly support. Bootstrap 3 is designed with a mobile-first approach, followed by desktop devices. This is actually a very timely shift, as more and more users are using mobile devices. To make websites developed with Bootstrap mobile-friendly and ensure proper rendering and touch zooming, you need to add the **viewport meta** tag in the head of the webpage, as shown below: The _width_ property controls the width of the device. Assuming your website will be viewed on devices with different screen resolutions, setting it to _device-width_ ensures it renders correctly on different devices. _initial-scale=1.0_ ensures that the webpage loads at a 1:1 ratio without any zooming. On mobile browsers, you can disable the zooming function by adding _user-scalable=no_ to the **viewport meta** tag. Typically, _maximum-scale=1.0_ is used together with user-scalable=no. After disabling zooming, users can only scroll the screen, which makes your website look more like a native app. Note that we do not recommend this approach for all websites; it depends on your specific situation! By adding the _img-responsive_ class, images in Bootstrap 3 become more friendly to responsive layouts. Next, let's look at what CSS properties this class includes. In the code below, you can see that the _img-responsive_ class applies max-width: 100%; and height: auto; to the image, allowing it to scale proportionally without exceeding the size of its parent element. .img-responsive { display: block; height: auto; max-width: 100%;} This indicates that the related image is displayed as a _block_. When you set an element's display property to block, it is displayed as a block-level element. Setting _height:auto_ means the height of the related element depends on the browser. Setting _max-width_ to 100% overrides any width specified via the width property. This makes the image more friendly to responsive layouts. If you need to center horizontally an image that uses the .img-responsive class, use the .center-block class, not .text-center. ### Basic Global Display Bootstrap 3 uses _body {margin: 0;}_ to remove the margin from the body. Please see the following settings for the body: body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff;} The first rule sets the default font style for the body to _"Helvetica Neue", Helvetica, Arial, sans-serif_. The second rule sets the default font size for text to 14 pixels. The third rule sets the default line height to 1.428571429. The fourth rule sets the default text color to #333333. The last rule sets the default background color to white. ### Typography Use the @font-family-base, @font-size-base, and @line-height-base properties for typography styles. ### Link Styles Set the global link color via the @link-color property. The default style for links is set as follows: a:hover, a:focus { color: #2a6496; text-decoration: underline;} a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;} So, when the mouse hovers over a link, or when a link has been visited, the color is set to #2a6496. Also, an underline is displayed. In addition, visited links display a thin dotted outline with the color code #333. Another rule sets the outline to 5 pixels wide and includes a browser extension _-webkit-focus-ring-color_ for webkit-based browsers. The outline offset is set to -2 pixels. All these styles can be found in scaffolding.less. Bootstrap uses (http://necolas.github.io/normalize.css/) to establish cross-browser consistency. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styles of HTML elements. Bootstrap 3's _container_ class is used to wrap content on the page. Let's take a look at this _.container_ class in the bootstrap.css file. .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} With the code above, the left and right margins (margin-right, margin-left) of the container are determined by the browser. Please note that due to fixed padding, containers are not nestable by default. .container:before,.container:after { display: table; content: " ";} This creates pseudo-elements. Setting _display_ to _table_ creates an anonymous table-cell and a new block formatting context. The _:before_ pseudo-element prevents margin collapse, and the _:after_ pseudo-element clears floats. If the _contenteditable_ attribute appears in the HTML, it creates a space around the above elements due to some Opera bugs. This can be fixed by using _content: " "_. .container:after { clear: both;} It creates a pseudo-element and ensures that all containers contain all floating elements. Bootstrap 3 CSS has responsive media queries that set max-width for the container within different media query breakpoints to match the grid system. @media (min-width: 768px) { .container { width: 750px;} * * * ## Bootstrap Browser/Device Support Bootstrap works well on the latest desktop and mobile browsers. Older browsers may not be supported well. The following table shows the latest versions of browsers and platforms supported by Bootstrap: | | Chrome | Firefox | IE | Opera | Safari | | --- | --- | --- | --- | --- | --- | | **Android** | YES | YES | N/A | N/A | N/A | | **iOS** | YES | N/A | N/A | N/A | YES | | **Mac OS X** | YES | YES | N/A | YES | YES | | **Windows** | YES | YES | YES* | YES | N/A | * Bootstrap supports Internet Explorer 8 and higher versions of IE.