Bootstrap Buttons Bootstrap Block Buttons classbtn btnblock Bootstrap

Bootstrap 버튼(Buttons)

Bootstrap 블록 버튼(Block Buttons) 부트스트랩 버튼 �class=“btn btn-block” : 블록 버튼

Bootstrap 버튼 그룹 <div class="container"> <h 2>Button Group</h 2> <div class="btn-group"> <button class="btn btn-primary">Apple</button> <button class="btn btn-primary">Samsung</button> <button class="btn btn-primary">Sony</button> </div>

Bootstrap 버튼 그룹 사이즈 class=“btn-group-lg” class=“btn-group-sm” class=“btn-group-xs” <div class="container"> <h 2>Button Group 사이즈</h 2> <div class="btn-group-lg"> <a class="btn btn-primary">메인</a> <a class="btn btn-primary">카페</a> <a class="btn btn-primary">블로그</a> <a class="btn btn-primary">쇼핑</a> </div> <div class="btn-group-sm"> <a class="btn btn-primary">사전</a> <a class="btn btn-primary">뉴스</a> <a class="btn btn-primary">증권</a> </div> <div class="btn-group-xs"> <a class="btn btn-primary">날씨</a> <a class="btn btn-primary">대기정보</a> </div>

Bootstrap 버튼 그룹 Vertical <div class="container"> <h 2>Button Group Vertical</h 2> <div class="btn-group-vertical"> <button class="btn btn-primary">Apple</button> <button class="btn btn-primary">Samsung</button> <button class="btn btn-primary">Sony</button> </div>

Bootstrap 버튼 그룹 Justified <a> 태그 이용 <div class="container"> <h 2>Justified Button Group</h 2> <div class="btn-group-justified"> <a class="btn btn-primary">Apple</a> <a class="btn btn-primary">Samsung</a> <a class="btn btn-primary">Sony</a> </div> <button> 테그 이용 <div class="btn-group-justified"> <div class="btn-group"> <button class="btn btn-primary">Apple</button> </div> <div class="btn-group"> <button class="btn btn-primary">Samsung</button> </div> <div class="btn-group"> <button class="btn btn-primary">Sony</button> </div>

Bootstrap 드롭다운 버튼(Dropdown Button) <div class="container"> <h 2>Split Buttons</h 2> <div class="btn-group"> <a class="btn btn-primary">Sony</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> 삼각형쓰 <ul class="dropdown-menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div>

Bootstrap 글리피콘(glyphicon) 사용법 <span class="glyphicon 글리피콘이름"></span> 예제 <div class="container"> <span class="glyphicon-envelope"></span> <span class="glyphicon-glass"></span> <span class="glyphicon-road"></span> </div>

Bootstrap 글리피콘(glyphicon) <div class="container"> <h 2>Glyphicon Examples</h 2> <p>Envelope icon: <span class="glyphicon-envelope"></span></p> <p>링크 Envelope icon: <a href="#"><span class="glyphicon-envelope"></span></a> </p> <p>Search icon: <span class="glyphicon-search"></span></p> <p>Search icon 기본버튼: <button class="btn btn-default"> <span class="glyphicon-search"></span> 검색 </button> </p> <p>Search icon 스타일 버튼: <button class="btn btn-info"> <span class="glyphicon-search"></span> 검색 </button> </p> <p>Print icon: <span class="glyphicon-print"></span></p> <p>Print icon 스타일 링크 버튼: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon-print"></span> 프린트 </a> </p> </div>

Bootstrap 글리피콘(glyphicon)