Bootstrap Kya Hai

First Page
Next Page

Bootstrap तेजी से और आसान Web Development के लिए एक शक्तिशाली Front-end Framework है. Bootstrap मे Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel और कई अन्य के साथ-साथ वैकल्पिक JavaScript Extensions होते है. जैसे आम उपयोगकर्ता Interface Components के लिए HTML और CSS पर आधारित Design Templates आदि शामिल होते है. Bootstrap आपको बहुत कम प्रयासो के साथ एक Responsive Layout बनाने की क्षमता भी देता है.

Bootstrap के फायदे

Bootstrap का उपयोग करने का सबसे बड़ा फायदा यह है कि यह Flexible और Responsive Web Layouts के साथ ही आम Interface Components बनाने के लिए Free Tools प्रदान करता है.

इसके अलावा Bootstrap Data APIs का उपयोग करते हुए Scrollspy और Typeaheads जैसे JavaScript मे एक Line को लिखने के बिना Advance Interface Components को बना सकता है.

  • Easy to Use − Bootstrap बहुत आसान और Speedy Procedure है और यह बहुत अनुकूलनीय भी है. आप CSS के साथ Bootstrap का उपयोग कर सकते है.

  • Responsiveness − हर साल Mobile Devices बेहद लोकप्रिय होता जा रहा है और एक Responsive Website की आवश्यकता भी अनिवार्य और महत्वपूर्ण बन गई है. जैसा कि Fluid Grid Layout उपयुक्त Screen Resolution पर सख्ती से बदलता है. इस प्रकार Bootstrap के साथ Mobile Responsive Website को तैयार करना एक Smooth और आसान काम है. Bootstrap Classes के उपयोग के साथ आप Grid System मे Spots की संख्या को पहचान सकते है जिसे आप प्रत्येक Coloum मे शामिल करना चाहते है.

  • Consistency − कुछ Twitter Employees ने सबसे पहले आंतरिक उपकरण मे Compatibility को बढ़ाने के लिए एक Framework के रूप मे Bootstrap का विस्तार किया. लेकिन बाद मे Co-founder Mark Otto ने अगस्त 2011 में रिलीज़ की वास्तविक क्षमता को समझने के बाद Bootstrap का पहला Open Source Version दिया और उन्होंने यह भी Delineated किया कि कैसे एक Original Idea के उपयोग के साथ Bootstrap को बड़ा किया गया. और इस प्रकार Bootstrap Twitter पर लोकप्रिय हो गया है.

  • Support − Bootstrap एक बड़ा समर्थन समुदाय रखता है जब भी कोई समस्या आती है तब भी आपको सहायता प्रदान की जा सकती है. वर्तमान मे Bootstrap 9000 से अधिक के साथ-साथ 500 से अधिक योगदान कर्ताओं के साथ GitHub पर होस्ट विस्तारित और संरक्षित किया है.

  • Grid − Bootstrap मे 12-column Grid का उपयोग करने की क्षमता होती है और जो Responsive होती है. यह Offset और Nested Elements को भी कायम करता है और Grid को Responsive Mode मे बनाए रखा जा सकता है.

Bootstrap in Hindi Introduction

Bootstrap को HTML, CSS, Javascript को मिलाकर बनाया गया है इसलिए यह सबसे लोकप्रिय फ्रेमवर्क माना जाता है. इसका उपयोग Website को Responsive बनाने मे किया जाता है. Bootstrap तेजी से और आसान Web Development के लिए एक प्रभावशाली Front End Framework माना जाता है.

Bootstrap मे Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel और कई अन्य के साथ-साथ वैकल्पिक JavaScript Extensions होते है. जैसे आम उपयोगकर्ता Interface Components के लिए HTML और CSS पर आधारित Design Templates आदि शामिल होते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap First Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href = 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>	
   <body>
      <h1>Tutorialroot.com</h1>
      <p>Simply Eassy Learn Hindi Tutorial!</p> 
      <div class="container">
         <div class="row">
            <div class="col-sm-4">
               <h3>Column 1</h3>
               <p>Tutorial Root</p>
               <p>Simply Eassy Learn Hindi Tutorial</p>
            </div>
            <div class="col-sm-4">
               <h3>Column 2</h3>
               <p>Tutorial Root</p>
               <p>Simply Eassy Learn Hindi Tutorial</p>
            </div>
            <div class="col-sm-4">
               <h3>Column 3</h3> 
               <p>Tutorial Root</p>
               <p>Simply Eassy Learn Hindi Tutorial</p>
            </div>
         </div>
      </div>
   </body>
</html>

Output

Bootstrap in Hindi Grid

Bootstrap आपको Grid System का उपयोग करने का विकल्प प्रदान करता है जो एक Layout को बनाने के लिए सबसे तेज़ और Simple तरीको मे से एक के रूप मे जाना जाता है.

Bootstrap Grid System से Web Pages के Layouts को बनाने का एक तेज़ और Simple तरीका प्रदान करने के लिए जाना जाता है जिन्हे Designed करने की आवश्यकता होती है.

अगर पहले और अब उपलब्ध Bootstrap के दोनो Versions को Compare करे तो पिछले Bootstrap 2.x मे एक Grid System था जो Default रूप से तय किया गया था नया Versions अर्थात Bootstrap 3 को Mobile से पहले Responsive Fluid Grid System के रूप में पेश किया गया है जो सक्षम है Scale करने के लिए ताकि Viewport आकार बढ़ता जा रहा हो.

Bootstrap का नया Version Users को पूर्वनिर्धारित Grid Classes को शामिल करने की सुविधा देता है जो Grid Layouts को आसानी से बड़े उपकरणो के लिए सक्षम बनाता है जो कि Cell Phones से लेकर Laptops तक और Tablets से लेकर Smart Phones आदि तक अलग होते है. फिर उपयोग की जाने वाली Classes को Target Device के अनुसार बदल दिया जाता है और Desired Grid Size प्राप्त होता है.

Bootstrap Grid System आपको पूरे Page पर 12 Columns बनाने की अनुमति देता है. आप सभी 12 Columns को अलग-अलग उपयोग कर सकते है.

Grid Classes

Bootstrap Grid System मे Four Classes होती है.

  • xs (for phones)

  • sm (for tablets)

  • md (for desktops)

  • lg (for larger desktops)

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid System Example</title>
<link href = 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>Grid Example</h1>
         <div class="row">
            <div class="col-md-3"style="background-color:red;">Raja</div>
            <div class="col-md-3"style="background-color:green;">Arif</div>
            <div class="col-md-3"style="background-color:yellow;">Saharukh</div>
            <div class="col-md-3"style="background-color:blue;">Akki</div>
         </div>
      </div>
   </body>
</html>

Output

Three Equal Columns Example

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen
is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>

Output

Bootstrap in Hindi Pagination

Pagination Links से आपको ये संकेत मिलता है कि Related Content की एक श्रृंखला कई Pages पर मौजूद है.

आमतौर पर Pagination का उपयोग वह पर होता जहां पर Content की Long Lists के लिए Multi Page Approach सामान्य प्रदर्शन को मैनेज करना होता है जैसे Search Results और Inboxes आदि.

Pagination का उपयोग आपकी Website के Web Page को एक Organized तरीके से छोटा करने के लिए भी किया जाता है.

Pagination Classes

  • .pagination

  • .active

  • .disabled

  • .pagination-lg

  • .pagination-sm

  • .breadcrumb

Bootstrap Pagination Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">  
         <h2>Pagination</h2>
         <p>The Pagination Example Links:</p>                  
         <ul class="pagination">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
         </ul>        
      </div>  
   </body>
</html>

Output

Bootstrap Active State

Bootstrap मे Active State का उपयोग Current Page को Specifies करने के लिए किया जाता है जो Active है. आपको इसके लिये .active class का उपयोग करना होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Active State</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">  
         <h2>Bootstrap Active State</h2>
         <p>The Bootstrap Active State:</p>                  
         <ul class="pagination">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
         </ul>        
      </div>  
   </body>
</html>

Output

Bootstrap Disabled State

Bootstrap मे Disabled State का उपयोग Link को Disable करने के लिए किया जाता है जिससे Link को Click नहीं किया जा सकता है. आपको इसके लिये .disable class का उपयोग करना होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Disabled State</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
   <body>
      <div class="container">
         <h2>Bootstrap Disabled State</h2>
         <p>The Bootstrap Disabled State</p>                  
         <ul class="pagination">
            <li><a href="#">1</a></li>
            <li class="disabled"><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li ><a href="#">4</a></li>
            <li><a href="#">5</a></li>
         </ul>
      </div>
   </body>
</html>

Output

Bootstrap Default Pager

Pager Previous और Next Buttons प्रदान करता है. Previous और Next Buttons को बनाने के लिए .pager class को एक <ul> Element मे Add करते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Default Pager</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
   <body>
      <div class="container">  
         <h2>Bootstrap Default Pager</h2>
         <p>The Bootstrap Default Pager</p>                  
         <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
         </ul>        
      </div>  
   </body>
</html>

Output

Bootstrap in Hindi Jumbotron & Glyphicon

Bootstrap Jumbotron कुछ विशेष सामग्री या जानकारी पर अतिरिक्त ध्यान देने के लिए एक बड़े Box को Specified करता है. इसे Rounded Corners के साथ एक Grey Box के रूप मे दिखाया जाता है. इसका उपयोग अंदर के Text के Font Sizes को बढ़ाने के लिये भी किया जाता है.

Jumbotron Inside Container

Bootstrap Jumbotron एक Lightweight, Flexible Component को specify करता है जो कि Alternative रूप से हमारी Website पर संदेशो के पूरे Viewport को बढ़ा सकता है. यह Default Grey Color का होता है और Text के Font Sizes को बढ़ाता है यह <div> Element के साथ उपयोग किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Jumbotron inside container Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">  
         <div class="jumbotron">  
            <h1>Jumbotron inside container!</h1>        
            <p>Lorem Ipsum is simply dummy text of the printing and 
            typesetting industry.</p>  
         </div>  
         <p>This is Tutorialsroot.</p>        
         <p>This is Tutorialsroot.com.</p>        
      </div>  
   </body>
</html>

Output

Jumbotron Outside Container

<!DOCTYPE html>
<html>
<head>
<title>Jumbotron outside container Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">  
         <div class="jumbotron">  
            <h1>Jumbotron outside container!</h1>        
            <p>Lorem Ipsum is simply dummy text of the printing and 
            typesetting industry.</p>  
         </div>  
         <p>This is Tutorialsroot.</p>        
         <p>This is Tutorialsroot.com.</p>        
      </div>  
   </body>
</html>

Output

Bootstrap Glyphicons

Bootstrap मे Glyphicons का उपयोग विभिन्न प्रकार के Glyphicons के लिए किया जाता है और यह Web Project मे उपयोग किया जाता है. यह Glyphivons Halflings Set से 260 Glyphicons Provide करता है.

For Example

<!DOCTYPE html>  
<html>  
<head>  
<title>Bootstrap Glyphicons Example</title>    
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>  
</head>  
   <body>  
      <div class="container">  
         <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>   
         <p>Print icon on a styled link button:  
            <a href="#" class="btn btn-success btn-lg">  
               <span class="glyphicon glyphicon-print"></span> Print   
            </a>  
         </p>   
      </div>  
   </body>  
</html>

Output

Bootstrap in Hindi Tables

Bootstrap Table मे एक Light Padding और Horizontal Dividers होते है. Bootstrap का उपयोग करके आप आसान तरीके से Table के रूप मे बहुत सुधार कर सकते है.

Supported Table Elements

Tag Description
<table>

यह एक Table को Define करता है.
<thead>

यह Table मे Header सामग्री का समूह कहलाता है.

<tbody>

यह Table मे Body सामग्री का समूह कहलाता है.
<tr>

यह Table मे Row को Define करता है.
<td>

यह Table मे Cell को Define करता है.
<th>

यह Table मे Header Cell को Define करता है.
<caption>

यह एक Table Caption को Define करता है.

Simple Table with Bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tables Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="container">  
         <table class="table">
            <thead>
               <tr>
                  <th>Row</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
               <tr>
                  <td>3</td>
                  <td>Saharukh</td>
                  <td>khan</td>
                  <td>Saharukh@mail.com</td>
               </tr>
            </tbody>
         </table>       
      </div>  
   </body>
</html>

Output

Striped Table

आप आसानी से Bootstrap's Class को जोड़कर zebra-stripes की तरह Alternate Background वाली Table बना सकते है. इसके लिये आपको Table Base Class मे .table-striped का उपयोग करना होगा. यह Background के Color को <tbody> Elements के भीतर Table Row मे जोड़कर प्राप्त किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Striped Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="container">
         <table class="table table-striped">
            <caption>Striped Table Layout</caption>
            <thead>
               <tr>
                  <th>Name</th>
                  <th>City</th>
                  <th>Pincode</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Amir</td>
                  <td>Mumbai, Maharashtra,</td>
                  <td>400090</td>
               </tr>
               <tr>
                  <td>Salman</td>
                  <td>Indore</td>
                  <td>452018</td>
               </tr>
               <tr>
                  <td>Saharukh</td>
                  <td>New Delhi</td>
                  <td>110005</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Output

Bordered Table

Table Border Class का उपयोग Table और Cells के सभी किनारों पर Borders को Add करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Bordered Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <table class="table table-bordered">
         <caption>Bordered Table Layout</caption>
         <thead>
            <tr>
               <th>Name</th>
               <th>City</th>
               <th>Pincode</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Amir</td>
               <td>Mumbai, Maharashtra,</td>
               <td>400090</td>
            </tr>
            <tr>
               <td>Salman</td>
               <td>Indore</td>
               <td>452018</td>
            </tr>
            <tr>
               <td>Saharukh</td>
               <td>New Delhi</td>
               <td>110005</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output

Hover Table

Table Hover Class का उपयोग Table Rows पर Hover स्थिति को सक्षम करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hover Table</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <table class="table table-hover">
         <caption>Hover Table Layout</caption>
         <thead>
            <tr>
               <th>Name</th>
               <th>City</th>
               <th>Pincode</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Amir</td>
               <td>Mumbai, Maharashtra,</td>
               <td>400090</td>
            </tr>
            <tr>
               <td>Salman</td>
               <td>Indore</td>
               <td>452018</td>
            </tr>
            <tr>
               <td>Saharukh</td>
               <td>New Delhi</td>
               <td>110005</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Output

Responsive Tables

किसी भी Table को Responsive बनाने के लिए केवल Table को <div> Element के अंदर Table Responsive Class को Apply करना होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Responsive Tables</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="table-responsive">
         <table class="table">
            <caption>Responsive Tables Layout</caption>
            <thead>
               <tr>
                  <th>Name</th>
                  <th>City</th>
                  <th>Pincode</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Amir</td>
                  <td>Mumbai, Maharashtra,</td>
                  <td>400090</td>
               </tr>
               <tr>
                  <td>Salman</td>
                  <td>Indore</td>
                  <td>452018</td>
               </tr>
               <tr>
                  <td>Saharukh</td>
                  <td>New Delhi</td>
                  <td>110005</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Output

Bootstrap in Hindi Carousel

Bootstrap Carousel एक Flexible, Responsive Path है. इसका उपयोग Slider को अपने Web Page पर Add करने के लिए किया जाता है. यह बहुत ही Responsive और Flexible है. इससे आप Images, Iframes, Videos अन्य किसी प्रकार के सामग्री को भी Add कर सकते है.

Bootstrap Carousel Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>  
.carousel-inner > .item > img,  
.carousel-inner > .item > a > img {  
width: 80%;  
margin: auto;  
}  
</style> 
</head>	
<body>  
<div class="container">  
<h1>Bootstrap Carousel Example</h1>  
<div id="myCarousel" class="carousel slide" data-ride="carousel">   
<ol class="carousel-indicators">  
<li data-target="#myCarousel" data-slide-to="0" class="active">
</li>  
<li data-target="#myCarousel" data-slide-to="1"></li>  
<li data-target="#myCarousel" data-slide-to="2"></li>  
</ol>   
<div class="carousel-inner" role="listbox">  
<div class="item active">  
<img src="carousel.jpg" alt="Carousel 1" >  
</div>  
<div class="item">  
<img src="carouse2.jpg" alt="Carousel 2" >  
</div>  
<div class="item">  
<img src="carouse3.jpg" alt="Carousel 3" >  
</div>  
</div>    
<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>  
</div>  
</body>  
</html>

Output

Carousel Example Add Captions to Slides

Bootstrap मे Slider के साथ Caption का उपयोग Caption के साथ Content को Slide करने के लिए किया जाता है. इसके लिये आपको प्रत्येक <div class = "item"> के भीतर .carousel-caption class शामिल करना होता है.

For Example

<!DOCTYPE html>  
<html>  
<head>  
<title>Carousel Example Add Captions to Slides</title>  
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>  
<style>  
.carousel-inner > .item > img,  
.carousel-inner > .item > a > img {  
width: 80%;  
margin: auto;  
}  
</style> 
</head> 
<body>  
<div class="container">  
<h1>Carousel Example</h1>  
<div id="myCarousel" class="carousel slide" data-ride="carousel">   
<ol class="carousel-indicators">  
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
<li data-target="#myCarousel" data-slide-to="1"></li>  
<li data-target="#myCarousel" data-slide-to="2"></li>  
</ol>    
<div class="carousel-inner" role="listbox">  
<div class="item active">  
<img src="images/carousel.jpg" alt="Carousel 1" >  
<h3>Bootstrap Tutorial</h3>  
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>  
</div>  
<div class="item">  
<img src="images/carousel.jpg" alt="Carousel 2" >  
<h3>Bootstrap Tutorial</h3>  
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>  
</div>  
<div class="item">  
<img src="images/carousel.jpg" alt="Carousel 3" >  
<h3>Bootstrap Tutorial</h3>  
<p>Read Bootstrap Tutorial at Tutorialsroot.</p>  
</div>  
</div>   
<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> 
</div>    
</body>  
</html>

Output

Bootstrap in Hindi Navbar

Navigation Bar एक Navigation Header की तरह है जो Page के Top पर रखा गया है. आप इसको Screen Size के अनुसार Collapse और Extend कर सकते हो. Bootstrap मे Page के Top पर एक Standard Navigation Bar बनाने के लिए <nav class = "navbar navbar-default"> Class का उपयोग किया जाता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Navigation bar Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <nav class="navbar navbar-default" role="navigation">
         <div class="navbar-header">
            <a class="navbar-brand" href="#">Tutorialsroot.com</a>
         </div>
         <div>
            <ul class="nav navbar-nav">
               <li class="active"><a href="#">HTML</a></li>
               <li><a href="#">CSS</a></li>
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     PHP 
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                     <li><a href="#">HTML</a></li>
                     <li><a href="#">HTML5</a></li>
                     <li><a href="#">CSS</a></li>
                     <li class="divider"></li>
                     <li><a href="#">CSS3</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Bootstrap</a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </nav>
   </body>
</html>

Output

Responsive Navbar Example

<!DOCTYPE html>
<html>
<head>
<title>Responsive Navbar Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <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="#">Tutorialsroot</a>
         </div>
         <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
               <li class="active"><a href="#">HTML</a></li>
               <li><a href="#">HTML5</a></li>
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     CSS 
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                     <li><a href="#">CSS3</a></li>
                     <li><a href="#">Bootstrap</a></li>
                     <li><a href="#">PHP</a></li>
                     <li class="divider"></li>
                     <li><a href="#">JAVA</a></li>
                     <li class="divider"></li>
                     <li><a href="#">SQL</a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </nav>
   </body>
</html>

Output

Bootstrap in Hindi Images

Bootstrap Image को Support करता है. Bootstrap मे तीन Classes होती है जिनका उपयोग Images को कुछ Simple Style मे लागू करने के लिए किया जाता है.

  • Rounded Corners

  • Circle

  • Thumbnail

Rounded Corners

Image के Border को Rounded Corners करने के लिये .img-rounded class का उपयोग करते है.

For Example

<!DOCTYPE html>
<html>
<head>
   <title>Rounded Corners Images</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/bootstrap/images/img-rounded.png" class="img-rounded">
</body>
</html>

Output

Circle Images Example

Image को Circle Shapes देने के लिये .img-circle class का उपयोग करते है.

For Example

<!DOCTYPE html>
<html>
<head>
   <title>Circle Images Example</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/bootstrap/images/img-circle.png" class="img-circle">
</body>
</html>

Output

Thumbnail Images Example

Image को Thumbnail Shapes देने के लिये .img-thumbnail class का उपयोग करते है.

For Example

<!DOCTYPE html>
<html>
<head>
   <title>Rounded Corners Images</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/bootstrap/images/img-thumbnail.png" class="img-thumbnail">
</body>
</html>

Output

Bootstrap in Hindi Thumbnails

कई साइटो को Grid मे Images, Video, Text इत्यादि को रखने के लिए Bootstrap के पास Thumbnail के साथ ऐसा करने का एक आसान तरीका है. Bootstrap का उपयोग करके Thumbnail बनाने के लिए आसान होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Thumbnails Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="row">
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt="Thumbnails">
            </a>
         </div>
         <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" alt = "Thumbnails">
            </a>
         </div>
      </div>
   </body>
</html>

Output

Adding Custom Content

किसी भी तरह के HTML Content को Headings, Paragraphs, या Buttons जैसे Thumbnail मे जोड़ना बहुत आसान होता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Thumbnails Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.bootstrap-demo{margin:30px;}
</style>
</head>
   <body>
      <div class="row">
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                alt = "Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
         <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
               <img src="/bootstrap/images/thumbnail.jpg" 
                  alt="Generic placeholder thumbnail">
            </div>
            <div class="caption">
               <h3>Thumbnail Label</h3>
               <p>Some sample text. Some sample text.</p>
               <p>
                  <a href="#" class="btn btn-primary" role="button">
                     Button
                  </a> 
                  <a href="#" class="btn btn-default" role="button">
                     Button
                  </a>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Output

Bootstrap in Hindi Forms

Bootstrap मे तीन प्रकार के Form Layouts का उपयोग करते है.

  • Vertical Form (default)

  • Horizontal Form

  • Inline Form

Vertical Form

Bootstrap के साथ Basic Form Structure आता है जो Individual Form को Automatically नियंत्रण करके Global Styling को प्राप्त करता है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Vertical Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">  
<h1>Vertical Form Example</h1>  
<form style="width:300px">  
<div class="form-group">  
<label for="exampleInputEmail1">Email address</label>  
<input type="email" class="form-control" id="exampleInputEmail1" 
placeholder="Email">  
</div>  
<div class="form-group">  
<label for="exampleInputPassword1">Password</label>  
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">  
</div>  
<button type="submit" class="btn btn-default">Login</button>  
</form>  
</div>  
</body>
</html>

Output

Horizontal Form

Horizontal Form को बनाने के लिये आपको कुछ Additional Rules का उपयोग करना होता है जैसे कि.

Additional Rules for a Horizontal Form

  • Add class .form-horizontal to the <form> element

  • Add class .control-label to all <label> elements

For Example

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="Enter Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button typ="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
</html>

Output

Inline Form

Bootstrap मे Inline Forms के सभी Elements Inline है जो कीleft-aligned होते है और Labels के साथ मे मिले होते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Inline Form</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">File input</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label><input type="checkbox"> Check me out</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>

Output

Bootstrap in Hindi Dropdowns

Dropdowns Menus Toggleable और Contextual Menus एक List के प्रारूप मे Links को प्रदर्शित करने के लिए उपयोग किया जाता है.

यह Users को एक Predefined List से एक Value को चुनने की सुविधा प्रदान करता है. आप इसको Dropdown JavaScript Plugin के साथ और Interactive बना सकते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Dropdowns Menu Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
   <body>
      <div class="dropdown">
         <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
          data-toggle="dropdown">
            Development
            <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">HTML</a>
            </li>
            <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">HTML5</a>
            </li>
            <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">
                  JAVA
               </a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">PHP</a>
            </li>
         </ul>
      </div>
   </body>
</html>

Output

Dropdowns Inside Button Groups

Button Group के अंदर Dropdown Menus को बनाने के लिए .btn-group को एक अन्य .btn-group के भीतर Dropdowns Markup के साथ रखते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Dropdowns Inside Button Groups Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
.bt-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bt-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Another Button</button>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary 
dropdown-toggle">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Output

Bootstrap in Hindi Tooltip Plugin

एक Tooltip एक छोटा Popup होता है जो तब प्रकट होता है जब User Mouse Pointer को एक Element जैसे कि Link या Buttons को संकेत या Element के बारे मे जानकारी प्रदान करते है.

Tooltips आपकी Website के नए Visitors के लिए बहुत उपयोगी हो सकते है. क्योंकि वे User को Mouse Pointer को उनके द्वारा Mouse और Link के उद्देश्य से जान सकते है.

For Example

<!DOCTYPE html>
<html>
<head>
<title>Tooltip Plugin Example</title>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<h4>Tooltip Examples for Buttons</h4>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
title="Tooltip on left">
Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip" 
data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip" 
data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip" 
data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip" 
data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>
</body>
</html>

Output

First Page
Next Page