Bootstrap – A Mobile Front end Framework

Bootstrap – A Mobile Frontend Framework

Have you ever thought of creating a beautiful web page within a day or two? Well with bootstrap it is possible!! Yes, you heard it right, with Bootstrap you can develop a creative device responsive website, single page application and many more. Let’s dive into a little history of Bootstrap.Bootstrap was first released in 2011, initially known as Twitter Blueprint developed at Twitter as a framework for consistency.

 

So what is this Bootstrap? It’s a mobile-first free front-end framework which could be developed along with HTML, CSS, and JavaScript.A list of websites running on bootstrap are:

Bootstrap is especially used for SPA(Single Page Applications)widely used for portfolios, event promotions, under construction websites and many more.

  • It can also be used along with other scripting tools like PHP, Angular, Python frameworks (Django, Flask).
  • It enhances the outlook and customizes according to one’s need.
  • It is very lightweight and supports all major browser and CSS compatibility fixes.
  • It has a very responsive structure and style.
  • It has grid system which enhances the view in small and large screen devices similar.

 

How to use Bootstrap??

Bootstrap can be used in two ways:

  • Import from Package(offline usage)
  • Use CDN links (server/browser cache)

 

As mentioned it can be used both ways, for the package you have to download the file from the official Bootstrap website or you can add the CDN links. These links could be added to the HTML file/s, and the CSS, JS, JQuery files could be accessed. To use the package you have to install on your machine by downloading it from the official website.

The image below will show you what is inside the precompiled bootstrap:

 

How to the CDN and bootstrap package?

  • To use bootstrap package:

Step1: Download bootstrap from the page https://getbootstrap.com/docs/3.3/getting-started

 

Step2: Install it on your system.

 

Step3: Save the package in the same folder you want to extract to the HTML file.

 

Step4: Add these links to the installed package to your head or body elements

<link href=”css/bootstrap.min.css” rel=”stylesheet”>

<script src=”js/bootstrap.min.js”></script><!– jQuery (necessary for Bootstrap’s JavaScript plugins) –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> <!—CDN link for jquery plugins– >

 

2)    To use maxCDN links:

   Step1: Copy these links below and add them to  your HTML file.

  Step2: To ensure your HTML file processes your the Bootstrap classes properly, you need to be online before running the HTML file.

Links:<!– Latest compiled and minified CSS –> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” >  <!– Optional theme –> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”>   <!– Latest compiled and minified JavaScript –> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>Now lets see a basic template created using bootstrap:

Below is the source code for the following template:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

<!–Optional Bootstrap Theme–>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”>

<!– jQuery library –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<!– Latest compiled JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<style>
#bg1{
background-image:url(bg.jpeg);
background-repeat: no-repeat;
width:1850;
height:750px;
}
#font1{
color:white;
font-family:Sans Serrif;
font-size:45px;

}
#font{
color:white;
font-family:Sans Serrif;
font-size:40px;
margin-left:600px;
margin-top:15px;
}
img{
border-radius:60%;
width:200px;
height:200px;
margin-left:550px;
margin-top:40px;
}
#para{
color:white;
margin-top:50px;
font-size: 25px;

}
</style>
</head>
<body>
<!–Creating a navigation bar–>
<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<ul class=”nav navbar-nav”>
<li><a href=”#” >Home </a></li>
<li><a href=”#”>About </a></li>
<li><a href=”#”>Projects </a></li>
<li><a href=”#”>Blog</a></li>
</ul>
<!–Right aligned navigation contents–>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”#”>Register</a></li>
<li><a href=”#”>Login</a></li>
</ul>
</div>
<div class=”container-fluid” id=”bg1″>
<div class=”col-md-4″>
<p id=”font1″>Web Developer</p>
<p id=”para”>”Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
</div>
<div class=”col-lg-4″>
<img src=”profile.jpg” alt=”user”>
<div id=”font”>
<p> Name </p>
<p> Age </p>
<p> Gender</p>
</div>
</div>
</div>
</nav>

</body>
</html>

 

 

 

Hope this blog inspires you to embrace change and grow. Whether you are an XPLORER or not, feel free to glance through our blogs and help us guide and support you in your voyage to success. Happy Learning!

 

 

 

 

 

0 responses on "Bootstrap – A Mobile Front end Framework"

Leave a Message

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

© Xplore IT Corp 2017. All rights reserved. Designed by ProPlus Logics
X