What is in Bootstrap apart from grid system? Why it has a Javascript file also?

|
| By Webner

Bootstrap has lots of other things apart from grid system such as:

1. Glyphicons: Bootstrap has inbuilt icons which we can use by icon’s class name.

For Example: “glyphicon-search” will create search icon without using any external image. So Bootstrap has a number of icons which we can use.

2. Responsive Navbar: Bootstrap has inbuilt responsive navbar. We do not need to add any extra CSS and Javascript for navigation:

We just need to add Bootstrap classes for navigation menu:

<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header"><button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Navigation</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li> fffffff</li>
<li> fffffff</li>
</ul> </nav>

Above menu is also an example of why Bootstrap uses Javascript. Inbuilt Javascript functions in bootstrap.js file help display the menu.

3. Breadcrumbs: Breadcrumbs are used to show hierarchy-based information for a site. In case of blog posts for example, breadcrumbs can show the date of publishing, categories or tags. Breadcrumb indicates the current page’s location within a navigational hierarchy.

There is inbuilt CSS class in the bootstrap.min.css file for breadcrumbs. We just need to add class name :

”breadcrumb”

<ol class = "breadcrumb">
<li><a href = "#"> Page1</a></li>
<li><a href = "#">1990</a></li>
<li class = "active">August</li>
</ol>

4.1.  Bootstrap – Alerts: Bootstrap has inbuilt different types of alerts which are supported with the help of inbuilt alert classes and bootstrap javascript:

 <div class = "alert alert-success alert-dismissable">
 <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true"></button>
 Success! green color
 </div>

 <div class = "alert alert-info alert-dismissable">
 <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">    </button>
 Information alert. blue color
 </div>

 <div class = "alert alert-warning alert-dismissable">
 <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">    </button Warning  yellow color alert
 </div>

 <div class = "alert alert-danger alert-dismissable">
 <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">    </button>
 Danger alert, red color alert
 </div>

This is another example where Bootstrap uses Javascript from the bootstrap.js file.
4.2. Bootstrap – Panels and accordion: Bootstrap has inbuilt panels and accordion.
Purpose of Panels and accordion: With Panels with Accordions we can display more content in smaller areas and users can expand each section as needed. Also, they give us the ability to collapse content, which is very useful for small devices:

<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>

Accordions also use the bootstrap.js file.

5.Bootstrap Modals: Bootstrap has inbuilt models and popups. We don’t need to add any extra Javascript for popups and models. Bootstrap has inbuilt Javascript for this:

6.Bootstrap Carousels: Bootstrap has the inbuilt slider. We don’t need to add any extra Javascript file for this slider. Carousel function is defined in the bootstrap.js file:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>

<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
<span class="sr-only">Previous </span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

So you can see bootstrap is feature rich and bootstrap javascript file is very important in bootstrap as all models, alerts, navigations, and carousels use Javascript functions from the bootstrap.js file.

Leave a Reply

Your email address will not be published. Required fields are marked *