( 공부 ) 부트스트랩_나열

<div class="container">

        <div class="row">

            <!--나열관련-->

            <div class="col-md-12">

                <div class="pull-left">float:left</div>

                <div class="pull-right">float:right</div>

                <div class="center-block width">center-block : block요소auto처리</div>

            </div>

            <div class="col-md-12">

                <div class="show">show : 나타나게 (display:block)</div>

                <div class="hidden">hidden : 사라지게 (display:none)</div>

            </div>

            <div class="col-md-12">

                <div class="text-left">글자 정렬 왼쪽</div>

                <div class="text-center">글자 정렬 중간</div>

                <div class="text-right">글자 정렬 오른쪽</div>

            </div>

        </div>

    </div>

---

<div class="container">

        <div class="row">

            <!--글자관련-->

            <div class="col-md-12">

                <div class="text-lowercase">소문자표현 - 영문

                    (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                </div>

                <div class="text-uppercase">대문자표현 - 영문

                    (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                </div>

                <div class="text-capitalize">앞철자대문자표현 - 영문

                    (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                </div>

            </div>

            <div class="col-md-12">

                <ul class="list-unstyled">

                    <li>list-style:none</li>

                </ul>

                <ul class="list-inline">

                    <li>inline-block + list-style:none</li>

                    <li>inline-block</li>

                    <li>inline-block</li>

                    <li>inline-block</li>

                </ul>

            </div>

        </div>

    </div>

---

<div class="container">

        <div class="row">

            <div class="row">

                <div class="col-md-12">

                    <div class="full-left">웹템플릿</div>

                    <div class="pull-right">웹템플릿</div>

                    <div class="center-block width">가운데</div>

                </div>

                <div class="col-md-12">

                    <div class="show">sbs아카데미</div>

                    <div class="hidden">sbs</div>

                </div>

                <div class="col-md-12">

                    <div class="text-left">왼쪽</div>

                    <div class="text-center">중간</div>

                    <div class="text-right">오른쪽</div>

                </div>

                <div class="col-md-12">

                    <div class="text-lowercase">소문자

                        (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                    </div>

                    <div class="text-uppercase">대문자

                        (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                    </div>

                    <div class="text-capitalize">앞철자대문자

                        (Lorem Ipsum is simply dummy text of the printing and typesetting industry)

                    </div>

                </div>

                <div class="col-md-12">

                    <ul class="list-unstyled">

                        <li>list</li>

                    </ul>

                    <ul class="list-inline">

                        <li>인라인블럭</li>

                        <li>인라인블럭</li>

                        <li>인라인블럭</li>

                        <li>인라인블럭</li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

---

★ 완성본 ★

index5.html

0.00MB