Apakah bootstrap 4 memiliki pembagi horizontal bawaan? Aku bisa melakukan ini,
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
Tetapi saya ingin menggunakan css bootstrap bawaan, saya tidak dapat menemukannya di mana pun di dokumen, mungkin saya melewatkannya.
html
css
bootstrap-4
twitter-bootstrap-4
pengguna7339197
sumber
sumber
border border-primary
kelas bekerjahr
.Bootstrap 4 menentukan gaya CSS untuk pembagi horizontal bawaan HTML
<hr />
, jadi gunakan saja.Anda juga dapat menyesuaikan margin dengan utilitas spasi:
mt
untuk margin atas,mb
untuk margin bawah, danmy
untuk margin atas dan bawah. Bilangan bulat mewakili jarak1
untuk margin kecil dan5
untuk margin besar. Berikut ini contohnya:<hr class="mt-2 mb-3"/> <!-- OR --> <hr class="my-3"/> <!-- It's like --> <hr class="mt-3 mb-3"/>
Saya dulu hanya menggunakan
div
denganborder-top
seperti:<div class="border-top my-3"></div>
tetapi itu adalah metode konyol untuk menyelesaikan pekerjaan, dan Anda dapat mengalami beberapa masalah. Jadi gunakan saja
<hr />
.sumber
Untuk Bootstrap 4
<hr>
masih berfungsi untuk pembagi normal. Namun, jika Anda menginginkan pembatas dengan teks di tengah:<div class="row"> <div class="col"><hr></div> <div class="col-auto">OR</div> <div class="col"><hr></div> </div>
sumber
Untuk dropdown, ya:
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>
sumber
Anda dapat menggunakan utilitas spasi
mt
danmb
untuk menambahkan margin ekstra ke<hr>
, misalnya:<hr class="mt-5 mb-5">
https://getbootstrap.com/docs/4.3/utilities/spacing/
sumber
<div class="form-group col-12"> <hr> </div>
sumber
/* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ 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 <hr> element. </p> <p class="font-weight-light mb-0">Snippet by <a href="https://bootstrapious.com" class=""> <u>Bootstrapious</u></a> </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>
sumber
Untuk Bootstrap v4;
untuk garis tipis;
<div class="divider"></div>
untuk garis tebal sedang;
<div class="divider py-1 bg-dark"></div>
untuk garis tebal;
<div class="divider py-1 bg-dark"><hr></div>
sumber
<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>
Ini adalah contoh kode untuk pembagi horizontal di bootstrap 4. Outputnya terlihat seperti ini:
class = "dropdown-divider" digunakan pada bootstrap 4, sedangkan class = "divider" digunakan pada bootstrap 3 untuk pembagi horizontal
sumber
Saya menggunakan contoh ini dalam proyek saya:
html:
<hr class="my-3 dividerClass"/>
css:
.dividerClass{ border-top-color: #999 }
sumber