बूटस्ट्रैप फॉर्म 'सही' तरीका लेआउट लेआउट?

Question

यहाँ मेरा रूप:

<div class="row"> 

<form class="well form-inline span6 offset3"> 

    <select name="data[Number][country]" id="NumberCountry"> 
     <option>Choose a country code:</option> 
     <option value="+44">+44</option> 
     <option value="+81">+81</option> 
     <option value="+1">+1</option> 
     <option value="+70">+70</option> 
    </select> 
    <input type="text" class="input-small span2" placeholder="eg. 7764"> 
    <input type="password" class="input-small span2" placeholder="eg. 123456"> 
    <button class="btn btn-large btn-primary">Activate Your SIM</button> 

</form> 


</div> 

उसके बारे में यहां काम कर रहे उदाहरण:

http://jsfiddle.net/pickledegg/aJfMx/6/

मैं इसे बूटस्ट्रैप का उपयोग कर bodged है, लेकिन मैं पर एक समझ पाने के लिए कोशिश कर रहा हूँ कैसे पंक्तियों और स्पैन को 'ठीक ट्यूनिंग' लेआउट के लिए इस्तेमाल किया जाना चाहिए।

मैं बटन को केंद्रीकृत करना चाहता हूं और इसके ऊपर कुछ जगह है। जैसा कि आप देख सकते हैं कि मैंने वहां कुछ पंक्तियां और अवधि कक्षाएं फेंक दी हैं, लेकिन क्या कोई मुझे ऐसा करने का 'सर्वश्रेष्ठ अभ्यास' तरीका दिखा सकता है? इससे मुझे इस ढांचे का सही तरीके से उपयोग करने के बारे में एक स्पष्ट तस्वीर बनाने में मदद मिलेगी।

Answer 1

^{बस आपका जवाब देखा, यहां मेरा मॉकअप है।}

आदेश में ठीक से अपने डिजाइन लेआउट करने के लिए, हम पहले अपने बटन के लिए दो पंक्तियों में वर्गों को अलग करने, एक इनपुट पंक्ति और एक पंक्ति, जरूरत इस हम .control-group वर्ग बूटस्ट्रैप द्वारा निर्धारित पर भरोसा कर सकते करने के लिए शामिल करने के लिए प्रत्येक अनुभाग। जगह में .control-group वर्ग के साथ तो, अपने मार्कअप कुछ इस तरह दिखेगा:

<div class="container"> 

<div class="row"> 
    <form class="well form-inline span8 offset2 custom-form">  
     <div class="control-group"> 
      <div class="controls"> 
       <select class="span4" name="data[Number][country]" id="NumberCountry"> 
        <option>Choose a country code:</option> 
        <option value="+44">+44</option> 
        <option value="+81">+81</option> 
        <option value="+1">+1</option> 
        <option value="+70">+70</option> 
       </select> 
       <input type="text" class="input-small span2" placeholder="eg. 7764"> 
       <input type="password" class="input-small span2" placeholder="eg. 123456"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls center"> 
       <button class="btn btn-large btn-primary">Activate Your SIM</button> 
      </div> 
     </div> 
    </form> 
</div> 

</div> <!-- /container --> 

इस तरह से आप कुछ मार्जिन इनपुट और बटन पंक्ति पर बूटस्ट्रैप द्वारा निर्धारित होगा और वे एक साथ नहीं रहेंगे। मैंने देखा है कि आप अपने डिज़ाइन में उत्तरदायी स्टाइलशीट भी शामिल कर रहे हैं और विंडो सेटअप पर आपके सेटअप प्रकार के ब्रेक भी दस्तावेज में बूटस्ट्रैप डेमो पर भी ध्यान देते हैं, इसलिए हमें इसके आसपास काम करना होगा। उस लक्ष्य के लिए, मैंने स्क्रीन का आकार बदलने पर इनपुट और बटन पंक्तियों को सही ढंग से स्थानांतरित करने के लिए अपना खुद का .custom-form क्लास बनाया है, इस प्रकार आपके परिवर्तन आपके साइट पर मौजूद अन्य बूटस्ट्रैप तत्वों को प्रभावित नहीं करेंगे। फ़ॉर्म पर अपने बटन को केन्द्रित करने के लिए .center नामक एक और कक्षा बनाई गई।

.custom-form input[class*="span"] { 
    width: 146px; 
} 

.center { 
    text-align:center; 
} 

@media (max-width: 767px) { 
    .custom-form input[class*="span"], select[class*="span"] { 
     margin-bottom:10px; 
     width:100%;  
    } 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    .custom-form.span8 { 
     width:548px; 
    } 
} 

डेमो: http://jsfiddle.net/aJfMx/8/

Answer 2

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

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

<form class="form-horizontal" name="formName" action="" method="POST"> 

और

<!-- Name input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="tokenName">Name</label> 
     <div class="col-md-6"> 
      <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
     </div> 
</div> 

देखें ... बिल्कुल नहीं है कि बुरा।

एक बार आपके पास यह हो जाने के बाद, फॉर्म-ग्रुप के लिए अपनी कॉल लंबाई निर्धारित करें और आपको बहुत अच्छे आकार में होना चाहिए। जब आप अपनी विंडो का आकार बदलते हैं तो यह उचित आकार लागू करेगा। सबसे अच्छा हिस्सा यह है कि जब तक आप फॉर्म उपस्थिति के अपने स्वयं के अनुकूलन में शामिल नहीं होना चाहते हैं, तब तक कोई सीएसएस संशोधन आवश्यक नहीं है। बूटस्ट्रैप इसे आपके लिए संभालता है। यदि आप आगे पढ़ना चाहते हैं लेकिन इस पोस्ट के प्रयोजनों के लिए यहां एक बहुत अच्छा ट्यूटोरियल (http://tutsme-webdesign.info/bootstrap-3-contact-modal/) है; यहां मैंने ट्यूटोरियल के आधार पर एक साथ वास्तविक त्वरित फेंक दिया है।

<a href="#" data-toggle="modal" data-target="#modalName">Some Link Here</a> 
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="modalName" aria-hidden="true"> 
    <div class="modal-dialog> 
     <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Some Header Here</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="container center-block"> 
      <form class="form-horizontal" name="formName" action="" method="POST"> 
       <fieldset> 

        <!-- Name input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="tokenName">Name</label> 
         <div class="col-md-6"> 
          <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
         </div> 
        </div> 

        <!-- URL input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="url">URL</label> 
         <div class="col-md-6"> 
          <input id="url" name="url" type="text" placeholder="http://somedomain.com" class="form-control"> 
         </div> 
        </div> 

        <!-- Entity Association --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="associationId">Association</label> 
         <div class="col-md-6"> 
          <select class="form-control" id="associationId" name="associationId"> 
           <option>Choose an Association</option> 
           <option value="1">Programming</option> 
          </select> 
         </div> 
        </div> 

        <!-- Message body --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="description">Description</label> 
         <div class="col-md-6"> 
          <textarea class="form-control" id="description" name="description" placeholder="Please enter your description here..." rows="5"></textarea> 
         </div> 
        </div> 

        <!-- Form actions --> 
        <div class="form-group"> 
         <div class="col-md-10 text-right"> 
          <button type="submit" value="Submit" class="btn btn-primary btn-lg">Save</button> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 
</div> 
</div>