ट्विटर बूटस्ट्रैप इनपुट फ़ील्ड की ऊंचाई घटाएं?

Question

मेरी रूप में मैं अपने इनपुट क्षेत्र की ऊंचाई कम करना चाहते हैं।

मैं जानता हूँ कि इनपुट-छोटे देखते हैं, इनपुट-मध्यम वर्ग है जो इनपुट क्षेत्र की चौड़ाई को नियंत्रित है, लेकिन वहाँ कुछ भी ऊंचाई को नियंत्रित करने के लिए इसी तरह की है?

मैं किसी भी नहीं मिल सका और मैं चूक अधिभावी के बारे में कैसे जाते हो अगर वहाँ नहीं है?

Answer 1

मुझे कोई नहीं मिला और यदि मैं डिफ़ॉल्ट रूप से ओवरराइड करने के बारे में नहीं हूं?

बूटस्ट्रैप की इनपुट फ़ील्ड ऊंचाई विशेषता चयनकर्ताओं का उपयोग करके परिभाषित किया गया है उदा। input[type="text"], input[type="password"]

आप एक ही चयनकर्ता प्रारूप में अपनी शैलियों के साथ ओवरराइड, या वर्गों और इस तरह का उपयोग करता है सकते हैं।

.mystyle input[type="text"] { 
    height: 14px; 
    font-size: 10px; 
    line-height: 14px; 
} 

Answer 2

बूटस्ट्रैप दस्तावेज़ के अनुसार: Bootstrap CSS, आप .input-sm

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

<input class="form-control input-sm" type="text" placeholder=".input-sm"> 

यह बस के रूप में @Neps

ने उल्लेख किया height संपत्ति बदलता है लेकिन, मैं सही आकार पाने के लिए अपने खुद के सीएसएस में .input-sm ओवरराइड करने के लिए किया है।

मैं बस जहां कभी संभव बूटस्ट्रैप वर्गों का उपयोग करना पसंद।

Answer 3

हाँ, वहाँ ऊंचाई को नियंत्रित करने के लिए वर्ग हैं। आप उनके बारे में here पढ़ सकते हैं।

input-lg 
input-sm 

Answer 4

मैं अपने बूटस्ट्रैप फ़ाइलों के लिए एक कम या एस.ए.एस.एस. संकलक उपयोग करने के लिए, और बूटस्ट्रैप के साथ-साथ कम/एस.ए.एस.एस. फ़ाइलों को डाउनलोड सीखने सुझाव है। यह बहुत मुश्किल नहीं है और वास्तव में जिस तरह से आप बूटस्ट्रैप को अनुकूलित करने के लिए "अनुमानित" हैं। यह एक या दो tweaks के लिए थोड़ा भारी हाथ हो सकता है, लेकिन समग्र रंग योजना या ग्रिड/इनपुट नियंत्रण रिक्ति और पैडिंग जैसी चीज़ों के लिए यह वास्तव में बहुत बेहतर है क्योंकि कम चर सार्वभौमिक हैं और उन चीजों पर लागू हो सकते हैं जो आप ' टी ओवरराइड करने के लिए सोचते हैं। उदाहरण के लिए, आपको "फॉर्म-कंट्रोल" कक्षा के साथ अपने सभी इनपुट सजाने चाहिए। "फ़ॉर्म नियंत्रण" और "उत्पादन" वर्गों फाइल में परिभाषित कर रहे हैं: forms.less, और क्षेत्र की ऊंचाई आधारित है पर कई कारकों की जांच:

.form-control { 
    display: block; 
    width: 100%; 
    height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) 
    padding: @padding-base-vertical @padding-base-horizontal; 
    font-size: @font-size-base; 
    line-height: @line-height-base; 
    color: @input-color; 
    background-color: @input-bg; 
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 
    border: 1px solid @input-border; 
    border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS. 
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 

    ...more stuff I removed... 
    } 

चर के

सभी में परिभाषित कर रहे हैं एक एकल, फ़ाइल के साथ काम करने में आसान, और वहां किए गए परिवर्तन सब कुछ प्रभावित करते हैं।

//== Components 
// 
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). 

@padding-base-vertical:  6px; 
@padding-base-horizontal: 12px; 

@padding-large-vertical: 10px; 
@padding-large-horizontal: 16px; 

@padding-small-vertical: 5px; 
@padding-small-horizontal: 10px; 

@padding-xs-vertical:  1px; 
@padding-xs-horizontal:  5px; 

@line-height-large:   1.3333333; // extra decimals for Win 8.1 Chrome 
@line-height-small:   1.5; 

@border-radius-base:  4px; 
@border-radius-large:  6px; 
@border-radius-small:  3px; 

//** Global color for active items (e.g., navs or dropdowns). 
@component-active-color: #fff; 
//** Global background color for active items (e.g., navs or dropdowns). 
@component-active-bg:  @brand-primary; 

//** Width of the `border` for generating carets that indicate dropdowns. 
@caret-width-base:   4px; 
//** Carets increase slightly in size for larger components. 
@caret-width-large:   5px; 

आप बस संकलक का उपयोग कर नए बी एस फ़ाइलों के लिए अपने पुराने चर लागू होते हैं, बी एस का एक नया संस्करण बाहर आता है, तो: यहां एक नमूना है।

लिंक: http://getbootstrap.com/customize/

http://lesscss.org/

दृश्य स्टूडियो उपयोगकर्ताओं: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler