라벨이 부트스트랩인 게시물 표시

[부트스트랩] 컨텐츠 #3 - 테이블

테이블 부트스르랩을 사용하여 테이블 스타일 지정하는 방법을 예제와 함께 설명하도록 하겠습니다..
사용예제 테이블은 날짜 선택과 같은 타사의 캘랜더 모듈에서 많이 되어 기본적으로 스타일을 사용자가 선택하도록 설계되었습니다.  기본 클래스 .table을 <table>에 추가 한 다음 사용자 정의 스타일이나 다양한 포함 된 추가 클래스로 확장하면됩니다.
가장 기본적인 테이블 마크 업을 사용하여 테이블 기반 테이블이 부트스트랩 에서 어떻게 나타나는지 알수 있습니다.
#First NameLast NameUsername1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter <tableclass="table"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody>…

[부트스트랩] 컨텐츠 #1 - 타이포그래피

헤딩태그(Headings) 모든 HTML 문서에서 헤딩은 <h1>에서<h6>까지 사용할 수 있습니다

HeadingExample<h1></h1>h1. Bootstrap heading<h2></h2>h2. Bootstrap heading<h3></h3>h3. Bootstrap heading<h4></h4>h4. Bootstrap heading<h5></h5>h5. Bootstrap heading<h6></h6>h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>
헤딩 태그를 사용하지 않고 .h1 부터 .h6 클래스를 사용하여 스타일을 지정할 수 있습니다.

h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading

<pclass="h1">h1. Bootstrap heading</p><pclass="h2">h2. Bootstrap heading</p><pclass="h3">h3. Bootstrap heading</p><pclass="h4">h4. Bootstrap headi…

[부트스트랩] 레이아웃 #2 – Media Object

이미지
미디어 객체 (Media Object) 예제 (exaple)   미디어 객체는  이미지/비디오/오디오 같은 객체가 기존 객체를 둘러싸지 않는 콘텐츠와 나란히 배치되거나  복잡하고 반복적인 구성 요소를 만드는데 도움을 줍니다. 또한 flexbox 덕분에 두 가지 필수 클래스만으로 작업을 수행 할 수 있습니다. 콘텐츠를 둘러싼 .media 및 .media-body라는 두 가지 클래스 만 있으면됩니다.
아래는 단일 미디어 객체의 예입니다. 선택적 패딩 및 마진은 공간 유틸리티를 통해 제어 할 수 있습니다.

<div class="media"><img class="d-flex mr-3" src="..." alt="Generic placeholder image"><div class="media-body"><h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div></div> 중첩 (Nesting) 미디어 객체는 무한대로 중첩 될 수 있지만, 어느 시점에서 중단하는 것이 좋습니다. 상위 미디어 객체의.media-body 내에 중첩 된.media를 배치합니다.

<div class="media"><img class="d-flex mr-3" src="..." alt=…