क्या बूटस्ट्रैप 4 में एक क्षैतिज विभक्त बनाया गया है?

Question

क्या बूटस्ट्रैप 4 में एक क्षैतिज विभक्त बनाया गया है? मे यह कर सकती हु,

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

लेकिन मैं बूटस्ट्रैप सीएसएस में निर्मित का उपयोग करना चाहता हूं, मैं इसे डॉक्स में कहीं भी नहीं ढूंढ सकता हूं, शायद मैं इसे याद कर रहा हूं।

Answer 1

HTML में पहले से ही एक अंतर्निहित क्षैतिज विभक्त कहा जाता है <hr/>("क्षैतिज नियम" के लिए छोटा)। बूटस्ट्रैप शैली इसे इस तरह से :

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
   Some text
   <hr/>
   More text
</p>

Comments

कभी-कभी आपको एक वर्ग जोड़ना होगा = "w-100" या <hr> एक बिंदु के रूप में दिखाई देगा। getbootstrap.com/docs/4.0/utilities/sizing

— हंटर नेल्सन

बूटस्ट्रैप 4 में परीक्षण किया गया, border border-primaryकक्षाएं काम करती हैं hr।

— ल्यूक पुप्लेट

Answer 2

बूटस्ट्रैप 4 HTML अंतर्निहित क्षैतिज विभक्त के लिए सीएसएस शैली को परिभाषित करता है <hr />, इसलिए इसका उपयोग करें।

आप मार्जिन उपयोगिताओं के साथ मार्जिन को भी अनुकूलित कर सकते हैं: mtमार्जिन शीर्ष के लिए, mbमार्जिन नीचे के लिए और myमार्जिन शीर्ष और नीचे के लिए। पूर्णांक 1छोटे मार्जिन और 5विशाल मार्जिन के लिए रिक्ति का प्रतिनिधित्व करता है । यहाँ एक उदाहरण है:

<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-3"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>

मैं सिर्फ एक के divसाथ प्रयोग किया जाता है border-topजैसे:

<div class="border-top my-3"></div>

लेकिन यह काम करने के लिए एक मूर्खतापूर्ण तरीका है, और आपके पास कुछ मुद्दे हो सकते हैं। तो बस उपयोग करें <hr />।

Comments

<div class = "बॉर्डर-टॉप my-3"> </ div> स्पैन उपयोग की बजाय div

— अनुजा देशपांडे पाटिल

प्रश्न के सापेक्ष यह उत्तर सही है लेकिन सीमा- * को विभक्त के रूप में उपयोग नहीं किया जाना चाहिए। कल्पना करें कि आप कई पंक्तियों को अलग करना चाहते हैं। यदि आप बॉर्डर- * को एक पंक्ति में लगाते हैं, तो यह पैरेंट कंटेनर की तरफ से जाएगा। यदि आप व्यक्तिगत कॉलम में बॉर्डर- * लगाते हैं तो मोबाइल पर स्टैक्ड होने पर वे अच्छे नहीं दिखेंगे। एकमात्र विकल्प <hr /> का उपयोग करने के लिए है जैसे कि स्वीकृत उत्तर का सुझाव दिया गया है।

— माई

Answer 3

बूटस्ट्रैप 4 के लिए

<hr>अभी भी एक सामान्य विभक्त के लिए काम करता है। हालाँकि, यदि आप बीच में पाठ के साथ एक विभक्त चाहते हैं:

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>

Answer 4

ड्रॉपडाउन के लिए, हाँ:

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Answer 5

उदाहरण के लिए, अतिरिक्त मार्जिन जोड़ने के लिए आप उपयोग mtऔर mbरिक्ति उपयोगिताओं का उपयोग कर सकते हैं <hr>:

<hr class="mt-5 mb-5">

https://getbootstrap.com/docs/4.3/utilities/spacing/

Answer 6

बूटस्ट्रैप v4 के लिए;

एक पतली रेखा के लिए;

<div class="divider"></div>

मध्यम मोटी रेखा के लिए;

<div class="divider py-1 bg-dark"></div>

एक मोटी रेखा के लिए;

<div class="divider py-1 bg-dark"><hr></div>

Answer 7

   <div class="form-group col-12">
            <hr>
   </div>

Answer 8

यहाँ कुछ कस्टम उपयोगिता वर्ग हैं:

hr.dashed {
    border-top: 2px dashed #999;
}

hr.dotted {
    border-top: 2px dotted #999;
}

hr.solid {
    border-top: 2px solid #999;
}


hr.hr-text {
  position: relative;
    border: none;
    height: 1px;
    background: #999;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #999;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

body {
    min-height: 100vh;
    background-color: #fff; 
    color: #333;
}
.text-uppercase {
  letter-spacing: .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container py-5">
    <!-- For Demo Purpose -->
    <header class="py-5 text-center">
        <h1 class="display-4">Bootstrap Divider</h1>
        <p class="lead mb-0">Some divider variants using &lt;hr&gt; element.    </p>
    </header>


    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="mb-4">
                <h6 class=" text-uppercase">Dashed</h6>
                <!-- Dashed divider -->
                <hr class="dashed">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Dotted</h6>
                <!-- Dotted divider -->
                <hr class="dotted">
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase">Solid</h6>
                <!-- Solid divider -->
                <hr class="solid">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Text content</h6>
                <!-- Gradient divider -->
                <hr data-content="AND" class="hr-text">
            </div>
           
        </div>
    </div>
</div>

Answer 9

<div class="dropdown">
  <button data-toggle="dropdown">
      Sample Button
  </button>
  <ul class="dropdown-menu">
      <li>A</li>
      <li>B</li>
      <li class="dropdown-divider"></li>
      <li>C</li>
  </ul>
</div>

यह बूटस्ट्रैप में क्षैतिज विभक्त के लिए नमूना कोड है। आउटपुट इस तरह दिखता है:

क्लास = "ड्रॉपडाउन-डिवाइडर" का उपयोग बूटस्ट्रैप 4 में किया जाता है, जबकि क्लास = "डिवाइडर" का उपयोग बूटस्ट्रैप 3 में क्षैतिज लेटर के लिए किया जाता है

Answer 10

मैं अपने प्रोजेक्ट में इस उदाहरण का उपयोग कर रहा हूं:

एचटीएमएल:

 <hr class="my-3 dividerClass"/>

सीएसएस:

.dividerClass{
  border-top-color: #999
 }