부트스트랩 나아가기

glyphicons 으로 부트스트랩에서 제공하는 아이콘 사용하기

<ul class="bs-glyphicons">
    <li><span class="glyphicon glyphicon-adjust"></span> glyphicon
        glyphicon-adjust</li>
    <li><span class="glyphicon glyphicon-align-center"></span>
           glyphicon glyphicon-align-center</li>

아이콘 관련한 자세한 사항은 다음의 링크를 참조

부트스트랩 컴포넌트

Font Awesome

드롭다운 메뉴

<h4>기본적인 드롭다운</h4>
<div class="dropdown">
    <a data-toggle="dropdown" href="#">여기를 클릭하세요.</a>
        <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 2</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 3</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">분리된 메뉴 </a></li>
        </ul>
</div>


<h4>드롭다운에 별도의 헤더 추가 가능 / class="disabled" 포함</h4>
<div class="dropdown">
    <input type="button" data-toggle="dropdown"
           class="btn btn-default btn-primary" value="여기를 클릭하세요.">
    <ul class="dropdown-menu" role="menu">
        <li role="presentation" class="dropdown-header">헤더</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 2</a></li>

        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">메뉴 2</a></li>

        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">메뉴 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">다른 헤더</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">분리된 메뉴 </a></li>
    </ul>
</div>

버튼 그룹화

<h1>버튼그룹</h1>
<h4>일반적인 버튼</h4>
<button type="button" class="btn btn-default">버튼 1</button>
<button type="button" class="btn btn-default">버튼 2</button>
<button type="button" class="btn btn-default">버튼 3</button>
<button type="button" class="btn btn-default">버튼 4</button>


<hr>
<h4>버튼 그룹으로 묶은 후 모습</h4>
<div class="btn-group">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
    <button type="button" class="btn btn-default">버튼 4</button>
</div>

<h4>버튼 그룹을 이용해서 버튼 크기 일괄 조절</h4>
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
</div>
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
</div>
<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
</div>

<h4>수직정렬 하기</h4>
<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <div class="btn-group">
        <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">클릭 <span class="caret"> </span></button>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">메뉴 1</a></li>
            <li><a tabindex="-1" href="#">메뉴 2</a></li>
        </ul>
    </div>
</div>

<h4>양쪽 정렬 (a 태그로 이루어진 버튼에 한해서만 가능</h4>
<div class="btn-group  btn-group-justified">
    <a href="#" class="btn btn-default">버튼 1</a>
    <a href="#" class="btn btn-default">버튼 2</a> 
    <a href="#" class="btn btn-default">버튼 3</a> 
    <a href="#" class="btn btn-default">버튼 4</a>
</div>

<h4>button 태그는 양쪽 정렬이 안됨.</h4>
<div class="btn-group  btn-group-justified">
    <button type="button" class="btn btn-default">버튼 1</button>
    <button type="button" class="btn btn-default">버튼 2</button>
    <button type="button" class="btn btn-default">버튼 3</button>
    <button type="button" class="btn btn-default">버튼 4</button>
</div>

버튼 드롭다운

<h4>일반적인 버튼 드롭 다운</h4>
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">버튼1 <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-default btn-primary dropdown-toggle" data-toggle="dropdown">클릭 <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴</a></li>
    </ul>
</div>

<h4>분할된 버튼 드롭 다운</h4>
<div class="btn-group">
    <button type="button" class="btn btn-default">버튼1</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>


<h4>버튼 드롭 다운 크기 조절</h4>
<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg">버튼1</button>
    <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>

<h4>버튼 드롭 다운 그룹에서 크기 조절</h4>
<div class="btn-group btn-group lg">
    <button type="button" class="btn btn-default">버튼1</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>

<h4>드롭업과 드롭다운 비교 btn-group에서 dropup</h4>
<div class="btn-group dropup">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        버튼1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-default" data-toggle="dropdown">
        버튼2 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li class="divider"></li>
        <li><a href="#">다른 메뉴 </a></li>
    </ul>
</div>

input group

<div class="input-group">
    <span class="input-group-addon"> 금액 </span> 
    <input type="text" class="form-control">
    <span class="input-group-addon"> 원 </span>
</div>

<h4>입력 그룹 크기조절</h4>
<div class="input-group input-group-lg">
    <input type="text" class="form-control">
    <span class="input-group-addon"> Cm </span>
</div>

<h4>입력 그룹 체크 박스 또는 라디오 버튼 추가</h4>
<div class="input-group">
    <span class="input-group-addon"> <input type="checkbox"></span>
    <input type="text" class="form-control">
</div>

<div class="input-group">
    <span class="input-group-addon"> <input type="radio"></span>
    <input type="text" class="form-control">
</div>

<h4>입력 그룹 버튼 애드온 추가</h4>
<div class="input-group">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-user"> </span>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

Navigation

<h4>탭형 네비게이션 class="active" 추가할 경우</h4>
<ul class="nav nav-tabs">
    <li><a href="#">메뉴1</a></li>
    <li class="active"><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
</ul>

<h4>알약형 네비게이션</h4>
<ul class="nav nav-pills">
    <li class="active"><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
</ul>

<h4>알약형 네비게이션은 수직으로 정렬 가능</h4>
<div class="col-md-3">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
    </ul>
</div>
<!-- 다른 메뉴들이 변경되더라도 floating 된 것에 영향을 받지 않고 자리에 고정 --> 
<div class="clearfix"></div>

<h4>탭형 네비게이션 양쪽 정렬</h4>
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
</ul>

<h4>알약형 네비게이션 양쪽 정렬</h4>
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
    <li><a href="#">메뉴4</a></li>
</ul>

<h4> 전체 크기가 조정되는 경우 collapse로 navbar 버튼형식으로 변경 </h4>
<nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">로고 </a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">메뉴1 </a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="검색">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>

</nav>

응용 : 네비게이션 바 고정시킨 후 드롭다운 메뉴 적용

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span> <span
                            class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">로고 </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">메뉴1 </a></li>
                        <li><a href="#">메뉴2</a></li>
                        <li><a href="#">메뉴3</a></li>
                        <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">드롭다운 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">서브메뉴 1</a></li>
                          <li><a href="#">서브메뉴 2</a></li>
                          <li><a href="#">서브메뉴 3</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="검색">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>

                </div>
                <!-- /.navbar-collapse -->
            </div>
        </nav>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Pellentesque non orci interdum, pharetra dui nec, eleifend ligula.
                Integer rutrum nunc a mi luctus vehicula. Aenean ut odio euismod,
                fringilla leo quis, tincidunt tellus. Pellentesque ultricies lectus
                non faucibus semper. Ut egestas turpis sed purus dignissim, quis
                vehicula odio convallis. Suspendisse egestas rutrum velit sit amet
                cursus. Suspendisse a sapien ac enim pretium egestas. Mauris eget
                risus ut velit molestie pretium.</p>

            <p>Integer ac molestie orci. Sed eget suscipit ante. Donec
                suscipit lectus sed lectus elementum mollis. Vivamus tempor libero
                vitae ligula rhoncus sollicitudin. Mauris pretium eros non mauris
                pharetra, sit amet iaculis sapien egestas. Maecenas sodales augue at
                sapien facilisis, ut venenatis justo sodales. Nam est mi, semper at
                enim tincidunt, faucibus hendrerit risus. Morbi ligula libero,
                laoreet non libero in, adipiscing sagittis eros. In hac habitasse
                platea dictumst. Aenean nec accumsan mi. Nam dapibus mattis
                vestibulum. Duis eget purus volutpat, cursus nisi quis, ullamcorper
                diam. Cras commodo sodales quam, eget consectetur lorem laoreet vel.
                Curabitur rhoncus metus vitae eleifend porttitor. Donec congue orci
                id tortor laoreet, et fermentum lectus tincidunt. Nullam ac
                tincidunt ante.</p>

            <p>Aliquam erat volutpat. Duis tincidunt mattis orci et lacinia.
                Praesent posuere fringilla dui ut vestibulum. Maecenas eleifend odio
                id tincidunt cursus. Donec molestie orci nulla, sed lobortis libero
                accumsan et. Quisque libero nisi, molestie a elit vel, ultricies
                mollis ipsum. Praesent semper massa et pharetra aliquet.</p>

            <p>Aliquam et fringilla odio. Integer tristique vehicula posuere.
                Aenean vulputate a lectus sed vulputate. Class aptent taciti
                sociosqu ad litora torquent per conubia nostra, per inceptos
                himenaeos. Aliquam tincidunt dui vitae viverra mattis. Sed eget enim
                enim. Curabitur blandit turpis quis metus tincidunt, quis egestas
                tortor gravida. Maecenas fermentum turpis justo, vel fermentum massa
                scelerisque eget. Vivamus auctor, tortor vel porttitor cursus, sem
                augue faucibus turpis, sed venenatis ante lacus in augue. Duis
                faucibus tortor non magna faucibus dictum. Aenean at dictum ligula.
                Maecenas at arcu massa. In et fermentum quam, a varius risus. Mauris
                ut turpis et sem tristique scelerisque. Aenean dui erat, laoreet ac
                faucibus eu, adipiscing ac dolor.</p>

            <p>Etiam justo orci, accumsan a lacinia ac, suscipit id turpis.
                Nunc auctor erat id risus cursus mollis. Pellentesque semper massa a
                semper sodales. Proin pretium orci dolor, in lacinia tellus
                tincidunt non. Praesent pretium nec sem vitae consectetur.
                Suspendisse ut vestibulum libero. Ut eu eleifend enim, in dapibus
                nibh. Nullam congue volutpat nisi sit amet iaculis. Nullam dapibus
                iaculis lectus sed aliquam. Ut ut eros et lectus posuere vestibulum
                in et felis. Etiam eu est iaculis, faucibus lectus ac, ultrices
                odio.</p>

            </p>
        </article>
    </div>
    <!-- container 끝 -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>

경로 / 페이지네이션

<h4>경로</h4>
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">menu1 </a></li>
    <li class="active">submenu</li>
</ol>

<h4>페이지네이션</h4>
<ul class="pagination">
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#" class="disabled">5</a></li>
    <li><a href="#" class="disabled">»</a></li>
</ul>

<h4>span을 이용해서 a 태그 제거하기</h4>
<ul class="pagination pagination-lg">
    <li class="disabled"><span>«</span></li>
    <li class="active"><span>1 </span></span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul>

<h4>페이저 가운데 정렬</h4>
<ul class="pager">
    <li><a href="#">이전 페이지 </a></li>
    <li><a href="#">다음 페이지 </a></li>
</ul>

<h4>페이저 비활성화</h4>
<ul class="pager">
    <li class="previous disabled"><a href="#">← 이전 글 </a></li>
    <li class="next"><a href="#">새로운 글 →</a></li>
</ul>

라벨 / 뱃지

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>

<div class="col-xs-3">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#"> <span class="badge pull-right">42</span>메뉴1
            </a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#"><span class="badge pull-right">10</span> 메뉴4</a></li>
    </ul>
</div>

경보

<div class="alert alert-success">입력하신 모든 정보가 성공적으로 서버에 전송되었습니다.</div>

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>축하합니다.!</strong> 회원이 성공적으로 이뤄졌습니다. <a href="#" class="alert-link">홈으로 돌아가기 </a>
</div>

<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <strong>경고!</strong> 입력하신 이메일이 존재하지 않습니다.
</div>

progressbar

<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>

<h4>움직이는 바</h4>
<div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

<h4>하나씩 쌓이는 바</h4>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 30%">
        <span class="sr-only">30% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 20%">
        <span class="sr-only">20% Complete (danger)</span>
    </div>
</div>

저작자표시

'HTML, CSS, ECMA6 > 부트스트랩(Bootstrap)' 카테고리의 다른 글

[부트스트랩(Bootstrap)] 부트스트랩 Jquery 사용하기 (0)	2019.07.02

성장을 담은 기록물

[부트스트랩(Bootstrap)] 부트스트랩 나아가기

부트스트랩 나아가기

'HTML, CSS, ECMA6 > 부트스트랩(Bootstrap)' 카테고리의 다른 글

티스토리툴바

[부트스트랩(Bootstrap)] 부트스트랩 나아가기

부트스트랩 나아가기

'HTML, CSS, ECMA6 > 부트스트랩(Bootstrap)' 카테고리의 다른 글

'HTML, CSS, ECMA6/부트스트랩(Bootstrap)' Related Articles

티스토리툴바