728x90
반응형
girdres
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script> </head> <body> <div class="container-fluid"> <h1>Small Grid</h1> <p>브라우저 창의 크기를 조정하여 효과를 확인하세요.</p> <p> 소형 장치(576픽셀이상 767픽셀의 화면 너비를 가진 것)이하 사이즈에서 한 줄로 표시됨. 아래의 예제는 width 100%를 9:3 비율로 나눈다. </p> <div class="row"> <!-- <div class="col-sm-9 col-xl-6 bg-success">col-sm-9</div> <div class="col-sm-3 col-xl-6 bg-warning">col-sm-3</div> --> <div class="col-1 col-sm-9 col-xl-6 bg-success">col-sm-9</div> <div class="col-11 col-sm-3 col-xl-6 bg-warning">col-sm-3</div> </div><br> <p>아래의 예제는 width 100%를 3개의 div를 동일한 비율로 나눈다.</p> <div class="row"> <div class="col-sm bg-success">col-sm</div> <div class="col-sm bg-warning">col-sm</div> <div class="col-sm bg-success">col-sm</div> </div> <br><br> <div class="container-fluid"> <div class="row"> <div class="col-sm-4 bg-success"> <p>col-sm-4</p> </div> <div class="col-sm-8 bg-warning"> <p>col-sm-8</p> </div> </div> </div><br> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 bg-success"> <p>col-sm-6</p> </div> <div class="col-sm-6 bg-warning"> <p>col-sm-6</p> </div> </div> </div> </div> </body> </html>
button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script> <style> /* button.btn.btn-primary{padding : 10px 30px;} */ a.btn.btn-primary {pointer-events: none;} </style> </head> <body> <div class="container"> <h2>Button Styles</h2> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> </div><br> <div class="container"> <h2>Button Outline</h2> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div><br> <div class="container"> <h2>Button Sizes</h2> <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> </div><br> <div class="container"> <h2>Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-success btn-block">Button 2</button> </div><br> <div class="container"> <h2>Button States</h2> <p>.active 클래스는 버튼을 누른 것처럼 보이게 하고 비활성화된 속성은 버튼을 클릭할 수 없게 만든다. <a>요소는 비활성화된 특성을 지원하지 않으므로 비활성화 시키려면 .disabled 클래스를 사용해야 한다. </p> <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> <a href="https://www.naver.com" class="btn btn-primary disabled">Disabled Link</a> <a href="https://www.naver.com" class="btn btn-primary">Disabled Link</a> </div><br> </body> </html>
k;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.js"></script> <style> /* .dropdown-menu.show{top:38px !important; transform: none !important;} */ </style> <script> $(function(){ $("h2").click(function(){ alert($(".btn-group").eq(1).attr("data-val")); }) }) </script> </head> <body> <div class="container"> <h2>Dropdown Split Buttons</h2> <div class="btn-group"> <button type="button" class="btn btn-primary" data-toggle="dropdown">Primary</button> <!-- data- : jQuery에서 나온 속성 --> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary"data-toggle="dropdown">Secondary</button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-success"data-toggle="dropdown">Success</button> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-info"data-toggle="dropdown">Info</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-warning"data-toggle="dropdown">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger" data-toggle="dropdown">Danger</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> </div> <div class="container"> <h2>dropdown-divider</h2> <p>얇은 수평 구분선 처리</p> <h2>dropdown-item-text</h2> <p>일반텍스트처럼 처리됨. a태그의 기본 속성이 나타나게 됨.</p> <h2>drop-header</h2> <p>드롭다운 메뉴 내부에 헤더를 추가하는데 사용</p> <div class="dropdown"> <button type="button" class="btn btn-primary" data-toggle="dropdown">Dropdown Button</button> <div class="dropdown-menu"> <h5 class="dropdown-header" href="#">Dropdown header</h5> <a class="dropdown-item" href="#">Another link</a> <a class="dropdown-item-text" href="#">Text link</a> <div class="dropdown-divider"></div> <h5 class="dropdown-header" href="#">Dropdown header</h5> <a class="dropdown-item" href="#">Another link</a> </div> </div> </div> </body> </html>
728x90
반응형
'[JS]' 카테고리의 다른 글
| [Bootstrap] navbar (0) | 2024.03.12 |
|---|---|
| [Bootstrap] form validation (0) | 2024.03.11 |
| [Bootstrap] container, col (0) | 2024.03.11 |
| jqueryui (0) | 2024.03.11 |
| jqueryui (0) | 2024.03.08 |