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

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

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

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

헤딩태그(Headings) 모든 HTML 문서에서 헤딩은 <h1> 에서 <h6> 까지 사용할 수 있습니다 Heading Example <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 ...

[부트스트랩] 레이아웃 #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 clas...