Bootstrap 4 có tích hợp bộ chia ngang không?

Question 1

Bootstrap 4 có tích hợp bộ chia ngang không? Tôi có thể làm điều này,

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

Nhưng tôi muốn sử dụng bootstrap css tích hợp sẵn, tôi không thể tìm thấy nó ở đâu trong tài liệu, có lẽ tôi đang thiếu nó.

Question 2

HTML đã có sẵn một bộ chia ngang được gọi là <hr/>(viết tắt của "quy tắc ngang"). Bootstrap tạo kiểu như thế này :

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>

Mở rộng đoạn mã

Question 3

Bootstrap 4 xác định kiểu CSS cho bộ chia ngang tích hợp sẵn trong HTML <hr />, vì vậy chỉ cần sử dụng nó.

Bạn cũng có thể tùy chỉnh lề bằng các tiện ích giãn cách: mtcho lề trên, mbcho lề dưới và mycho lề trên và dưới. Số nguyên đại diện cho khoảng cách 1cho lề nhỏ và 5cho lề lớn. Đây là một ví dụ:

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

Tôi đã từng sử dụng chỉ divvới border-topnhư sau:

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

nhưng đó là một phương pháp ngớ ngẩn để hoàn thành công việc và bạn có thể gặp một số vấn đề. Vì vậy, chỉ cần sử dụng <hr />.

Question 4

Đối với Bootstrap 4

<hr>vẫn hoạt động đối với một dải phân cách bình thường. Tuy nhiên, nếu bạn muốn có một dải phân cách với văn bản ở giữa:

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

Question 5

Đối với danh sách thả xuống, có:

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>

Question 6

Bạn có thể sử dụng các tiện ích mtvà mbkhoảng cách để thêm các lề bổ sung vào <hr>, ví dụ:

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

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

Question 7

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

Mở rộng đoạn mã

Question 8

/*
*
* ==========================================
* 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 &lt;hr&gt; 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>

Mở rộng đoạn mã

Question 9

Đối với Bootstrap v4;

cho một đường mỏng;

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

cho một đường dày trung bình;

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

cho một đường dày;

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

Question 10

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

Đây là mã mẫu cho dải phân cách ngang trong bootstrap 4. Đầu ra có dạng như sau:

class = "dropdown-divider" được sử dụng trong bootstrap 4, trong khi class = "divider" được sử dụng trong bootstrap 3 cho bộ chia ngang

Question 11

Tôi đang sử dụng ví dụ này trong dự án của mình:

html:

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

css:

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