부트 스트랩 4에는 수평 분할기가 내장되어 있습니까? 할 수있어
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
하지만 내장 된 부트 스트랩 CSS를 사용하고 싶습니다. 문서의 어느 곳에서도 찾을 수 없습니다. 아마도 누락되었을 수 있습니다.
답변:
HTML에는 이미 <hr/>( "horizontal rule"의 약자) 라는 내장 가로 구분선이 있습니다. Bootstrap은 다음 과 같이 스타일을 지정합니다 .
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>border border-primary클래스는 hr.
부트 스트랩 4 는 HTML에 내장 된 가로 구분선에 대한 CSS 스타일을 정의 <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 />.
드롭 다운의 경우 예 :
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>
mt및 mb간격 유틸리티를 사용하여에 여백을 추가 할 수 있습니다. <hr>예를 들면 다음과 같습니다.
<hr class="mt-5 mb-5">
/*
*
* ==========================================
* 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><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의 수평 분할기에 대한 샘플 코드입니다. 출력은 다음과 같습니다.
class = "dropdown-divider"는 부트 스트랩 4에서 사용되며 class = "divider"는 부트 스트랩 3에서 수평 구분선에 사용됩니다.
내 프로젝트에서이 예제를 사용하고 있습니다.
html :
<hr class="my-3 dividerClass"/>
css :
.dividerClass{
border-top-color: #999
}