Monday, 7 September 2015

Basic Bootstrap Second Example Program Page

Posted by Anto Navis 2 Comments

Basic Bootstrap Second Example Program Page

bootstrap tutorials, bootstrap basic, web design  , responisve web design , boootstrap web site, bootstrap theme

Second Simple Example Program For Bootstrap :

In this below example will shows the simple bootstrap page with a responsive fixed with container,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My Second Bootstrap Page</h1>
  <p>some text.</p> 
</div>

</body>
</html>

Output:


Copy the above code and save it as an .html extension

Run the .html extension file , the output will be showned in the browser.




Read More

Wednesday, 26 August 2015

Basic Bootstrap Example Program Page

Posted by Anto Navis

Basic Bootstrap Example Program Page

bootstrap tutorials, bootstrap basic, web design  , responisve web design , boootstrap web site, bootstrap theme

First Simple Example Program For Bootstrap :

In this below example will shows the simple bootstrap page with a responsive fixed with container,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

Output:


Copy the above code and save it as an .html extension

Run the .html extension file , the output will be showned in the browser.

 

Read More

Saturday, 8 August 2015

How To Create The First Web Page Using Bootstrap ?

Posted by Anto Navis

How To Create The First Web Page Using Bootstrap ?

Bootstrap, Bootstrap Tutorials , web design , responsive webdesign, How to create website

1) Add HTML5 doctype :

                              Bootstrap will mainly requires the HTML elements and their CSS Properties, 
                              You must add the HTML5 doctype as the beginning of the page, and also include the language attribute and the character set.

Below is the example for : How To Add HTML5 Doctype in your web page ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2) Bootstrap 3 mobile first :

                            Bootstrap 3 is mainly used for responsive site creations and suitable for all mobiles, tablets, desktops,. Its especially mainly focus on the Mobile devices. Its one of the part on core - framework 

                            Bootstrap 3 mobile first styles are mainly used for proper rendering and also the touch zooming on mobile devices, tablets.

Below is the Example for : How to Add Bootstrap 3 Mobile first styles on your web page ?

<meta name="viewport" content="width=device-width, initial-scale=1">

*** width=device-width  its sets the part of the width on your site web page, 
            
It will be vary based on the mobile device screen sizes.

*** initial-scale=1 its defines the initial zooming level when the first loaded by the mobile browsers or desktop browsers  

3) Containers :

              Container element is mainly used for wrap the site contents.
              Container can be classified into the two types. such as 
                              1) Container : 
                                          Container class is used to provide the fixed width for the container
Syntax : Class="container"
                               2) Container Fluid  :
                                        Container Fluid Class is used to provide the full width for the container
Syntax : Class="container-fluid"
Read More

Thursday, 6 August 2015

How to use Bootstrap CDN ?

Posted by Anto Navis 2 Comments

How to use Bootstrap CDN ? in Bootstrap Tutorial

Bootstrap , Bootstrap tutorials, responsive design, web design

If you don't like to download the Bootstrap from getbootstrap.com and host yourself in your website , Then you can simply add the CDN Format in your website.

CDN is nothing but it is abbreviated in the form of the Content Delivery Network

CDN Provides the support for Bootstrap's CSS and JavaScript and also include in JQuery.

Add the Below code on your website header part,<head>.It will helps to act the bootstrap properties on your whole website, just add the simple links of an Bootstrap's  compiled and minified CSS , jQuery Library , Compiled JavaScript

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Advantage Of Using Bootstrap CDN : 

                            The One of the main advantage for using Bootstrap CDN is it will reduce the loading time of your website ,.

                  While compare to other websites our websites will be loaded quickly and produce our website as an earlier time , Doesn't take more time to produce the response result
Read More

Wednesday, 5 August 2015

Where to get the Bootstrap ?

Posted by Anto Navis

Where to get the Bootstrap ? 

bootstrap, bootstraptutorials, web design , responsive design

There are two ways to get the Bootstrap and using it on your website :


1) Download the bootstrap from the main website www.getbootstrap.com 

2) The another way is use the CDN link on your website to use the bootstrap on your website.

Note : CDN is abbreviated in the form of Content Delivery Network 

How to download Bootstrap ?

Go to the www.getbootstrap.com website and follow the detail instructions to download its for your website responsive designing use, 

Its the one of the opensource package file.


Read More

Monday, 3 August 2015

Bootstrap History and their advantages of using Bootstrap

Posted by Anto Navis

Bootstrap History

Bootstrap History and their advantages of using Bootstrap

Bootstrap will be developed by the two great peoples Mark Otto and Jacob at Twitter

He released the bootstrap product as an one of the open source product in the year of August 2011

In the year 2014 Bootstrap was the No. 1 Project In GitHub

Advantages Of Using Bootstrap 

1) Easy To Use :

                      Anyone can using this bootstrap just little bit know about the HTML, CSS 

2) Responsive Features : 

                      In the Bootstrap it can be align our whole website in to the respective mobile screen width and height,. 

                       Adjust the website based on the smartphones , tablets and also desktop screen sizes.

3) Mobile First - Approach : 

                      Mobile first styles is one of the part in Core Frame Work .,

                       It's mainly used for the mobile friendly website creation with responsive manner

4) Browser Compatibility : 

                      Bootstrap will be compatible for all the new modern browsers and also the old model version browsers,

                       Ex: Google Chrome, Mozilla Firefox, IE , Safari , Opera
Read More