twitter-bootstrap-3 ट्यूटोरियल
ट्विटर-बूटस्ट्रैप -3 के साथ शुरुआत करना

Angular 2 AngularJS asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails twitter-bootstrap
खोज…


टिप्पणियों

बूटस्ट्रैप वेबसाइटों और वेब अनुप्रयोगों को डिजाइन करने के लिए एक स्वतंत्र और ओपन-सोर्स फ्रंट-एंड वेब फ्रेमवर्क है। इसमें टाइपोग्राफी, फॉर्म, बटन, नेविगेशन और अन्य इंटरफ़ेस घटकों के साथ-साथ वैकल्पिक जावास्क्रिप्ट एक्सटेंशन के लिए HTML- और सीएसएस-आधारित डिज़ाइन टेम्पलेट शामिल हैं। कई वेब फ्रेमवर्क के विपरीत, यह केवल फ्रंट-एंड डेवलपमेंट के साथ ही चिंता करता है।

बूटस्ट्रैप, GitHub पर दूसरा सबसे अधिक स्टार वाला प्रोजेक्ट है, जिसमें लगभग 100,000 सितारे और लगभग 45,000 कांटे हैं।

संस्करण

संस्करण रिलीज़ की तारीख
3.3.7 2016/07/25

स्थापना

प्रयोग 

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>

बूटस्ट्रैप js फ़ाइल का संदर्भ बॉडी टैग के ठीक ऊपर स्क्रिप्ट टैग का उपयोग करके बनाया गया है (नीचे देखें)। यह भी ध्यान दें कि बूटस्ट्रैप ज्यादातर विगेट्स के लिए jQuery का उपयोग कर रहा है - जैसे अकॉर्डियन हिंडोला आदि .. इसलिए jQuery js फ़ाइल के नीचे बूटस्ट्रैप js फ़ाइल संदर्भ।

** नमूना ** 
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form 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">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

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

</body>

</html>

नमस्ते दुनिया

निम्न HTML पृष्ठ Bootstrap 3 का उपयोग करते हुए एक सरल हैलो वर्ल्ड पेज दिखाता है।

पृष्ठ में उदाहरण लिंक और ड्रॉप-डाउन नियंत्रण के साथ एक पूर्ण-चौड़ाई वाला नेविगेशन बार है। नेविगेशन बार बूटस्ट्रैप के मोबाइल की पहली क्षमताओं का लाभ उठाता है। यह मोबाइल व्यू में ढहने लगता है और उपलब्ध व्यूपोर्ट की चौड़ाई बढ़ने के साथ क्षैतिज हो जाता है।

इसके अलावा, एक jumbotron तत्व का उपयोग चित्रित जानकारी प्रदर्शित करने के लिए किया गया है। 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</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">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


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

</body>
</html>

बूटस्ट्रैप स्थापना और आरंभ करना

परिचय
तो आप अपने प्रोजेक्ट के लिए बूटस्ट्रैप का उपयोग शुरू करना चाहते हैं? महान! तो चलो अभी शुरू हो जाओ!

बूटस्ट्रैप क्या है? बूटस्ट्रैप एक ओपन सोर्स लाइब्रेरी है, जिसे आप रिस्पॉन्सिबल डिज़ाइन और सिंपल कोड का उपयोग करके अद्भुत रेस्पॉन्सिव प्रोजेक्ट बनाने के लिए उपयोग कर सकते हैं। उत्तरदायी डिज़ाइन एक डिज़ाइन दर्शन है जहाँ सिस्टम के डिज़ाइन में (प्रतिनिधित्व और लेआउट) डिवाइस के लेआउट के आधार पर प्रतिक्रिया / अनुकूलन करता है। आपके डिज़ाइन को उत्तरदायी बनाए रखने का प्राथमिक कारण उपकरणों की एक सरणी का उपयोग करके अपने एप्लिकेशन की पहुंच को बड़े उपयोगकर्ता आधार तक बढ़ाना है।
स्थापना
बूटस्ट्रैप को कई अलग-अलग तरीकों से और कई अलग-अलग तरह की परियोजनाओं के लिए स्थापित किया जा सकता है। नीचे दी गई सूची में मैंने बूटस्ट्रैप को स्थापित करने के तरीके पर कुछ डाउनलोड और ट्यूटोरियल लिंक दिए हैं
लिंक डाउनलोड करें

  • डायरेक्ट डाउनलोड - डाउनलोड लिंक
  • सीडीएन - यहाँ जाओ
  • बोवर - bower install bootstrap [पढ़ें]
  • NPM - npm install bootstrap [पढ़ें]
  • संगीतकार - composer require twbs/bootstrap [पढ़ें]
  • अनुकूलित करें - मेरे पास आपका स्वयं का कॉन्फ़िगरेशन है, आप यहां अनुकूलित कर सकते हैं ।
  • सैस - सैस से संबंधित परियोजनाओं के लिए आप इसे [यहां] [1] प्राप्त कर सकते हैं।

मूलभूत जानकारी
इसलिए आपने अब अपने प्रोजेक्ट में बूटस्ट्रैप स्थापित किया है। और अब बूटस्ट्रैप के महान लाभों का उपयोग शुरू करने का समय है। पहले मैं आपको बूटस्ट्रैप के कुछ बुनियादी उपयोग बताने जा रहा हूं, उसके बाद मैं कुछ छोटे उदाहरण दिखाऊंगा और अंत में मैं आपको एक स्टार्टअप कोड का उदाहरण दूंगा, जिसे आप एक शुरुआती टेम्पलेट के रूप में उपयोग कर सकते हैं!

ग्रिड प्रणाली
बूटस्ट्रैप एक ग्रिड सिस्टम का उपयोग करता है। इस ग्रिड प्रणाली में सामान्यतः 12 कॉलम होते हैं। इन 12 स्तंभों में से प्रत्येक की चौड़ाई समान है, लेकिन अलग-अलग ऊंचाइयां हो सकती हैं।

इसलिए हमारे पास एक ग्रिड प्रणाली है जिसमें 12 कॉलम होते हैं। हम अपनी बुनियादी वेबसाइट बनाने के लिए इन स्तंभों का उपयोग कर सकते हैं। हम कहते हैं कि हम निम्नलिखित लेआउट को प्राप्त करना चाहते हैं:

मेनू - पूरी चौड़ाई
साइडबार - स्क्रीन का 1/3
स्क्रीन की मुख्य सामग्री 2/3
पाद - पूर्ण चौड़ाई

मेनू
पहले हम मेनू को देखने जा रहे हैं। जैसा कि हम जानते हैं कि ग्रिड प्रणाली 12 कॉलमों के साथ काम करती है। चूंकि हम पूरी चौड़ाई पर मेनू चाहते हैं, इसलिए हमें मेनू को सभी 12 कॉलमों में रखना होगा। यह नीचे दिए गए उदाहरण की तरह दिखेगा 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>

मेनू को col-lg-12 वर्ग देकर हम निम्नलिखित संकेत देते हैं:
col - क्लासनाम में कॉलम कॉलम के लिए खड़ा है।
lg - क्लास में lg स्क्रीन की चौड़ाई के लिए खड़ा है, इस मामले में बड़ा है।
12 - क्लासनाम में 12 उन कॉलमों की संख्या के लिए खड़ा है, जिन्हें हम अपने मेनू में रखना चाहते हैं। इस मामले में हम पूर्ण चौड़ाई पर मेनू चाहते हैं, हम सभी 12 कॉलम (12/12) प्राप्त करते हैं

चूंकि हमने अपने मेनू के लिए 12 में से 12 कॉलम का उपयोग किया है, मेनू के बाद सब कुछ एक नई पंक्ति पर सेट किया जाएगा।

साइडबार
दूसरा आइटम जिसे हम अपने टेम्पलेट में जोड़ना चाहते हैं, वह साइडबार है। अब जैसा कि मैंने बताया है कि हम चाहते हैं कि स्क्रीन का 1/3 हिस्सा साइडबार हो। इसलिए हम जो करने जा रहे हैं, वह 12 कॉलम को 3. 3 में विभाजित करता है। 4. हम अब जानते हैं कि स्क्रीन के 1/3 तक पहुंचने के लिए हम कितने कॉलम भरना चाहते हैं। नीचे दिए गए कोड का पालन करें। 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>

मेनू के समान ही अब मेनू से हमारे कर्नल की संख्या भिन्न है।
col - क्लासनाम में कॉलम कॉलम के लिए खड़ा है।
lg - क्लास में lg स्क्रीन की चौड़ाई के लिए खड़ा है, इस मामले में बड़ा है।
4 - क्लासनेम में 12 उन स्तंभों की संख्या के लिए खड़ा है जिन्हें हम अपने साइडबार को रखना चाहते हैं। चूंकि इस मामले में हम चाहते हैं कि स्क्रीन का 1/3 भाग साइडबार भरे ताकि हम 12 कॉलम (4/12) में से केवल 4 को ही पकड़ें।

सामग्री
अब इस पंक्ति पर हम अभी भी हमारे साइडबार के बगल में 8 कॉलम बचे हैं। इसलिए अब हम अपनी सामग्री को भरने जा रहे हैं। नीचे उदाहरण कोड देखें 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>

अब चूंकि हमने इस पंक्ति पर अपने १२ कॉलम के शेष the कॉलम भरे हैं, इसलिए अगला खंड फिर से १२ कॉलम के साथ एक नई पंक्ति पर शुरू होगा।

पाद लगानेवाला
पाद लेख फिर से स्क्रीन पर एक पूरी चौड़ाई ब्लॉक होने जा रहा मेनू की तरह है, इसलिए हम अपने पाद लेख के लिए इस पंक्ति के सभी 12 कॉलमों को पकड़ लेंगे, नीचे उदाहरण कोड देखें। 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.

तो अब हमने बनाया है, बस एक बहुत छोटा HTML फ़ाइल हमारे पहले बूटस्ट्रैप टेम्पलेट के साथ। लेकिन यह बहुत मूल बातें है। आम तौर पर हम इसे पूर्ण बूटस्ट्रैप अनुभव देने के लिए इस कोड को थोड़ा और रूप देंगे। इन अनुभवों में से कुछ नीचे वर्णित हैं।

पंक्तियों और कंटेनरों का उपयोग करना जैसा कि मैंने ऊपर उदाहरण में बताया है बूटस्ट्रैप 12 कॉलमों की पंक्तियों का उपयोग करता है। जब एक पंक्ति 12 स्तंभों से भर जाती है तो बूटस्ट्रैप एक नई पंक्ति पर शुरू होगा। इन पंक्तियों को दिखाने का सबसे अच्छा तरीका है पंक्ति वर्गों का उपयोग करना। हम कंटेनर श्रेणी का भी उपयोग करेंगे। यह एक बॉडी टैग की तरह है, इस कंटेनर में हम अपना सारा कोड डाल देंगे। आप या तो कंटेनर या कंटेनर-द्रव वर्ग के बीच चयन कर सकते हैं। अंतर केवल इतना है कि कंटेनर-द्रव वर्ग एक स्क्रीन की पूरी चौड़ाई का उपयोग करता है और कंटेनर वर्ग नहीं करता है। इन बुनियादी विशेषताओं का एक उदाहरण नीचे है। 

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>

इसलिए हमने अब बूटस्ट्रैप के साथ एक पूर्ण पृष्ठ टेम्पलेट बनाया है। यह वास्तव में एक बहुत ही सरल है, लेकिन मूल बातों पर शुरू होता है और बाद में आप सभी प्रकार के बूटस्ट्रैप कक्षाओं और कार्यात्मकताओं का उपयोग करने में सक्षम होंगे। आखिरी चीज। कक्षाओं में lg - md - sm और xs कॉलम के नाम, जैसा कि मैंने पृष्ठ की चौड़ाई को बताया है। लार्जे, मेडियम, एसएमएल और एक्सएसएमएल। मत भूलो कि आप स्तंभों की मात्रा को बदलकर अलग-अलग चौड़ाई पर स्तंभों के लिए शैली का उपयोग कर सकते हैं। याद रखें एक पूरी पंक्ति में 12 कॉलम होते हैं!

अधिक जानकारी के लिए यात्रा करें: http://getbootstrap.com/ <br? महान उदाहरणों के लिए देखें: http://expo.getbootstrap.com या http://bootsnipp.com/

यदि आप चाहते हैं कि मैं और जानकारी जोड़ूँ या अगर आपको कुछ समस्याएँ आ रही हैं तो कृपया मुझे बताएं! और आप सभी को खुश कोडिंग!



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow