Skip to main content
This chapter provides an overview of the key pieces of Bootstrap's infrastructure, including Bootstrap's 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. Hence include the below piece of code for HTML5 doctype at the beginning of all your projects using Bootstrap.
<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Since Bootstrap 3 has been launched, Bootstrap has become mobile first. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  • width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.
  • initial-scale = 1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.
Add user-scalable = no to the content attribute to disable zooming capabilities on mobile devices as shown below. Users are only able to scroll and not zoom with this change, and results in your site feeling a bit more like a native application.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
Normally maximum-scale = 1.0 is used along with user-scalable = no. As mentioned above user-scalable = no may give users an experience more like a native app, hence Bootstrap doesn't recommend using this attribute.

Responsive Images

Bootstrap 3 allows you to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src = "..." class = "img-responsive" alt = "Responsive image">

Typography and Links

Bootstrap sets a basic global display (background), typography, and link styles −
  • Basic Global display − Sets background-color: #fff; on the <body> element.
  • Typography − Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base.
  • Link styles − Sets the global link color via attribute @link-color and apply link underlines only on :hover.
If you intend to use LESS code, you may find all these within scaffolding.less.

Normalize

Bootstrap uses Normalize to establish cross browser consistency.
Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

Containers

Use class .container to wrap a page's content and easily center the content's as shown below.
<div class = "container">
   ...
</div>
Take a look at the .container class in bootstrap.css file −
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
Note that, due to padding and fixed widths, containers are not nestable by default.
Take a look at bootstrap.css file −
@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}
Here you can see that CSS has media-queries for containers with width. This helps for applying responsiveness and within those the container class is modified accordingly to render the grid system properly.

Comments

Post a Comment

Popular posts from this blog

Virtualization is one of the most important technology feature and Microsoft has invested on this and the responsible role is called as Hyper-V. Let us now see how to install the Hyper-V Role, for doing this we should follow the steps given below. Step 1  − To Install DNS role go to “Server Manager” → Manage → Add Roles and Features. Step 2  − Click Next. Step 3  − Select the  Role-based  or  feature-based installation  option → click Next. Step 4  − I will install a Local Hyper-V role as it will Select a server from the server pool → Next. Step 5  − From the Roles lists, check the Hyper-V Server role → click Add Features on the popup windows which show up and then → Next. Step 6  − Click Next. Step 7  − Choose your server’s physical network adapters that will take part in the virtualization → Next. Step 8  − Under  Migration , leave the default settings →  Next . Step 9  − Choose the...
Post a Comment
Read more
The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more
If we want to add other additional drivers, so that our clients find them easier to install a printer on their own. We must follow the steps given below − Step 1  − Go to, Server Manager → Tools → Print Manager → Action → Add Driver… Step 2  − Check both boxes → Next. Step 3  − Choose the drivers Path to be installed and then → Next. Step 4  − Click the Finish button.
Post a Comment
Read more