BOOTSTRAP’S HTML STRUCTURE
A web page using twitter bootstrap has a basic html structure which should start from type of document declaration, navigation and container in body, adding style sheets, java scripts declaration and Meta tags in header.
For uniform rendering of its components and controls across all browsers, a HTML 5 doctype is needed by twitter bootstrap. This is due to the fact that HTML 5 elements are understood by the bootstrap which makes it necessary to include an appropriate doctype tag to the web page.
HTML HEADER
In order for a responsive working of the bootstrap with mobile devices and latest browsers, the minimum requirements in the html header part should be to include a bootstrap style sheet and declare a viewport meta tag; which is crucial for a mobile device and bootstrap to be able to respond in accordance with the zoom level and the width of display. Adjusting viewport’s width enables browsers to appropriately respond for the display size.
During the earlier versions of bootstrap, a separate style sheet referred to as bootstrap-responsive existed. Later , an inbuilt responsive in nature base style sheet known as bootstrap.css which is a single style sheet that handles web page responsiveness was developed. This bootstrap.css proves to be very useful for debugging during development.
HTML BODY
Before you close the body tag in the html body, the bootstrap java script file and jQuery file must be included. The bootstrap java script file should be rendered after the jQuery file.
Layouts
Fluid layout: No extra style sheet or additional step is required to obtain a responsive fluid layout in the bootstrap version 3.0.0. It is designed to implement the responsive layout by default. This layout is highly recommended for public websites.
Fixed layout: Creating a website with a fixed layout is not generally recommended. This is mainly due to the increasing amount of internet website traffic that is arising from small devices such as smart phones and tablets. A fixed layout is however needed in some cases such as intranet applications. If this is the case, steps followed to disable the fluid responsiveness of the layout include:
- Removing viewport mega tag
- Override width property to a fixed size
- If you are using NavBar, get rid of expanding and collapsing behavior.
- Instead of .col-md-* and .col-lg-*., use col-xs-* class in grid layouts.
Bootstrap happens to be a mobile- first framework, therefore anything you create or design guarantees mobile compatibility and responsiveness which honestly is more than amazing.
An inbuilt new website design for bootstrap uses the bootstrap framework’s latest version. In getting started a precompiled bootstrap version can be included using a CDN. You can also download the file. The next step is to unzip the archive file, after which lots of folders and files, which we will ignore, for now appear. Instead head directly to the ‘dist’ directory and transfer all the folders by copying to a new destination; this now becomes your project home. The best thing with bootstrap’s latest version is that it is more modular than previous versions. So assuming that what you need is the CSS reset, all you need to do is to use bootstrap-reboot.css. To use the grid, you similarly include bootstrap-grid.css in the project. When deploying an application online a minified version of bootstrap.css is needed.
Proceeding to the Js files, four folders namely: bootstrap .bundle. js, bootstrap. Bundle. min.js, bootstrap.js, and bootstrap. min.js appear. A bootstrap main java scripts libraries is contained in all these files. Things contained in these libraries include drop down menus, carousels, search auto suggests including other numerous strong java script functionalities. The minified version is used when the application can finally be deployed.
Having adequately covered on the basic structure, I will proceed on adding various components to a web page. Every single day we enter a website; these components are the things that we will always encounter which makes them a very important part of a web site. For the sake of a better understanding, the page can be divided into various parts namely:
Menu section: In bootstrap, to design a menu is the easiest thing to do in the web designing world. This is because it is designed to be responsive by default and even has the ability to get new appearances in smaller devices.
Header area: Jumbotron, which can display large headers and contents is a highly usable class offered by bootstrap. It is largely utilized by product based websites.
The content area: This content should be divided into three equal parts placed side by side. With the bootstrap’s flex box-based grid, doing this is one easy and fast task. A12-column grid system is provided thus dividing the screen into equal parts and all one needs to do is to specify which HTML is occupied by each part.
Footer area: Footer area uses the same principle as the content area.
CONCLUSION
The above article has therefore explained how the basic bootstrap structure works from selecting the bootstrap admin templates to end. Now you are aware about how easy it is to use even if one has no coding experience.
