FlowerBombs
navbar2.html 본문
navbar2.html
<body> <div class="container"> <div class = "page-header"> <h1>bs3-navbar-basic</h1> </div> <!-- 기본 명령어로 만들어지는 코드에 .navbar-default 혹은 .navbar-inverse 추가해야 함--> <!-- 메뉴바의 색상 테마 지정 --> <div class="navbar navbar-default"> <!-- 메뉴의 영역 --> <div class="container-fluid"> <!-- 로고 --> <div class="navbar-header"> <!-- 모바일 해상도에서만 표시되는 햄버거 버튼--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Title</a> </div> <!--메뉴항목--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!--특정 메뉴 강조--> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <!-- 서브 메뉴를 갖는 항목 --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> | cs |
https://getbootstrap.com/docs/3.3/components/#navbar
오른쪽으로 폼
<body> <div class="container"> <div class = "page-header"> <h1>bs3-navbar-basic</h1> </div> <!-- 기본 명령어로 만들어지는 코드에 .navbar-default 혹은 .navbar-inverse 추가해야 함--> <!-- 메뉴바의 색상 테마 지정 --> <div class="navbar navbar-default"> <!-- 메뉴의 영역 --> <div class="container-fluid"> <!-- 로고 --> <div class="navbar-header"> <!-- 모바일 해상도에서만 표시되는 햄버거 버튼--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Title</a> </div> <!--메뉴항목--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <!--특정 메뉴 강조--> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Link</a> </li> <!-- 서브 메뉴를 갖는 항목 --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password"> </div> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-user"></span> </button> </form> </div> </div> | cs |
container - 전체폭을 넓어지지 않도록 제한하는 역할
container밖으로 <div~ 를 빼면
-> 화면을 가득 채움
<div class="container-fluid">에서 fluid를 빼면
배경은 가득차는데 영역은 제한됨.
'Javascript & JQuery&Ajax > bootstrap' 카테고리의 다른 글
| list group.html (0) | 2019.02.26 |
|---|---|
| navbar1.html (0) | 2019.02.25 |
| pagination.html (0) | 2019.02.25 |
| nav.html (0) | 2019.02.25 |
| input-group.html (0) | 2019.02.25 |
'Javascript & JQuery&Ajax/bootstrap' Related Articles
more
Comments