CSS Overview
HTML5 doctype:
In bootstrap we use the elements of HTML and many of the properties of CSS, to include these into bootstrap we have to use the HTML5 doctype. Therefore the bootstrap projects must have the following code in the beginning for html5 doctype:
CODE:
<! DOCTYPE html >
<html>
…
</ html>
Mobile First:
When bootstrap 3 is released, bootstrap has become mobile first. The mobile first styles are included in bootstrap and we do not have to insert separate files for them. The viewport Meta tag should be added to the head element to enable touch zooming in mobile devices. Consider the following line of code in which the use of Meta tag is demonstrated:
CODE:
<meta name = “viewport” content = “width = device- width, initial- scale = 1.0” >
In this line of code, width is the attribute that is used to control the width of the device, when we set the value of width attribute to device width then it means that the width can be controlled on various different size devices which may include mobiles, tablets, desktops, etc. In the line of code above we have another attribute that is initial-scale which is used to ensure that no zooming can be done out of the box. The value of this attribute is 1.0 which states that the web page will be provided at 1:1 scale when it is loaded.
We can also add the value user-content = no to the attribute content, through this we cannot zoom in the mobile devices. In other words we can say that zooming capabilities will be disabled and the user can only be able to scroll through the webpage. This can be done as follows:
CODE:
<meta name = “viewport” content = ” width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no” >
In this way we have set the width to device width which will be adjusted to any type of device of any size and set user-scalable to no which will disable zooming capabilities. Now our webpage will only be scrollable.
Responsive Images:
To include responsive images into bootstrap or to make any image responsive in bootstrap we add .image- responsive class to the <img> element or tag. When we add this class it makes the maximum width to 100% that is max-width: 100% and the height of the image to auto that is height- auto, in this way the image is adjusted nicely and we can say that the image inserted is a responsive image inserted into bootstrap. Consider the following line of code in which we have done this:
CODE:
<imgsrc = “source of image” class = ” img- responsive” alt = “Inserted image is a Responsive image”>
In the above line of code first the source of the image is inserted and then the class. The class is img- responsive which makes the image a responsive image then the alt attribute is placed which in case when the page is not loaded or there is any network problem will display the text that inserted image is a responsive image.
Typography and Links:
In bootstrap we have basic global display which is used to set the color of the background within the body tag. Then we have Typography which takes the following attributes as the typographic base:
@font- family- base
@font- size – base
@line – height- base
Then we have link styles in bootstrap. Link styles are used to set the global link color by using the attribute @link – color.
All these things can be found in the scaffolding. less if we are using the LESS code.
Normalize:
Normalize.css is considered as an alternative to CSS and is HTML5 ready. Basically normalize is a small file of CSS which is used to provide more consistent styling of HTML elements. Normalize is used to normalize the styles that are needed to be normalized.
Containers:
There is a class named .container which is used to center the contents of the page or to wrap the contents of the page. This class can be used in the <div> tag as follows:
<div class = “container” >
…
</ div>
Consider the following lines of code in which demonstrate the implementation of the .container class in the file named bootstrap. css:
CODE:
.container {
padding- right: 12 px;
padding- left: 12 px;
margin- right: auto;
margin- left: auto;
}
It should be noted here that we have fixed the widths and padding also through which the containers cannot be nested (by default). We can also add the media queries for containers specifying the widths. The advantage of adding media queries for containers is that we can modify the container class which will provide the proper grid system.
