Bootstrap in Hindi

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

Advantages of 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

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

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

For Example

   Bootstrap First Example      Tutorialroot.com
 Simply Eassy Learn Hindi Tutorial!
   Column 1
 Tutorial Root
 Simply Eassy Learn Hindi Tutorial
 
 Column 2
 Tutorial Root
 Simply Eassy Learn Hindi Tutorial
 
 Column 3
 Tutorial Root
 Simply Eassy Learn Hindi Tutorial

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

   Bootstrap Grid System Example     Grid Example
 Raja
 Arif
 Saharukh
 Akki

Output

Three Equal Columns Example

   Bootstrap Example       Hello World!
 Resize the browser window to see the effect.
 The columns will automatically stack on top of each other when the screen is less than 768px wide.
 .col-sm-4
 .col-sm-4
 .col-sm-4

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

Bootstrap Pagination Example

Output

Bootstrap Active State

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

For Example

Output

Bootstrap Disabled State

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

For Example

Output

Bootstrap Default Pager

For Example

Output

Bootstrap in Hindi Jumbotron & Glyphicons

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 को बढ़ाता है यह Element के साथ उपयोग किया जाता है.

For Example

   Jumbotron inside container Example       Jumbotron inside container!
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 This is Tutorialsroot.
 This is Tutorialsroot.com.

Output

Jumbotron Outside Container

   Jumbotron outside container Example       Jumbotron outside container!
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 This is Tutorialsroot.
 This is Tutorialsroot.com.

Output

Bootstrap Glyphicons

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

For Example

   Bootstrap Glyphicons Example      Print icon:
 Print icon on a styled link button: Print

Output

Bootstrap in Hindi Tables

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

Supported Table Elements

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

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

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

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

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

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

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

Simple Table with Bootstrap

   Bootstrap Tables Example         Row  First Name  Last Name  Email  
 
  1  Saharukh  khan  Saharukh@mail.com  
 2  Saharukh  khan  Saharukh@mail.com  
 3  Saharukh  khan  Saharukh@mail.com

Row	First Name	Last Name	Email
1	Saharukh	khan	Saharukh@mail.com
2	Saharukh	khan	Saharukh@mail.com
3	Saharukh	khan	Saharukh@mail.com

Output

Striped Table

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

For Example

   Bootstrap Striped Table       Striped Table Layout  Name  City  Pincode  
 
  Amir  Mumbai, Maharashtra,  400090  
 Salman  Indore  452018  
 Saharukh  New Delhi  110005

Striped Table Layout
Name	City	Pincode
Amir	Mumbai, Maharashtra,	400090
Salman	Indore	452018
Saharukh	New Delhi	110005

Output

Bordered Table

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

For Example

   Bootstrap Bordered Table      Bordered Table Layout  Name  City  Pincode  
 
  Amir  Mumbai, Maharashtra,  400090  
 Salman  Indore  452018  
 Saharukh  New Delhi  110005

Bordered Table Layout
Name	City	Pincode
Amir	Mumbai, Maharashtra,	400090
Salman	Indore	452018
Saharukh	New Delhi	110005

Output

Hover Table

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

For Example

   Bootstrap Hover Table      Hover Table Layout  Name  City  Pincode  
 
  Amir  Mumbai, Maharashtra,  400090  
 Salman  Indore  452018  
 Saharukh  New Delhi  110005

Hover Table Layout
Name	City	Pincode
Amir	Mumbai, Maharashtra,	400090
Salman	Indore	452018
Saharukh	New Delhi	110005

Output

Responsive Tables

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

For Example

   Bootstrap Responsive Tables       Responsive Tables Layout  Name  City  Pincode  
 
  Amir  Mumbai, Maharashtra,  400090  
 Salman  Indore  452018  
 Saharukh  New Delhi  110005

Responsive Tables Layout
Name	City	Pincode
Amir	Mumbai, Maharashtra,	400090
Salman	Indore	452018
Saharukh	New Delhi	110005

Output

Bootstrap in Hindi Carousel

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

Bootstrap Carousel Example

   Bootstrap Carousel Example    .carousel-inner > .item > img, .carousel-inner > .item > a > img  Bootstrap Carousel Example
     Previous  Next

Output

Carousel Example Add Captions to Slides

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

For Example

   Carousel Example Add Captions to Slides    .carousel-inner > .item > img, .carousel-inner > .item > a > img  Carousel Example
    Bootstrap Tutorial
 Read Bootstrap Tutorial at Tutorialsroot.
 
  Bootstrap Tutorial
 Read Bootstrap Tutorial at Tutorialsroot.
 
  Bootstrap Tutorial
 Read Bootstrap Tutorial at Tutorialsroot.
 
 
 Previous  Next

Output

Bootstrap in Hindi Navbar

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