bootstrap
44일차 2023-05-09
choi Hoon
2023. 5. 9. 20:06
BootStrap
Dropdowns18.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Dropdowns18.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Dropdowns</h1>
<p>A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list</p>
</div><!--jumbotron-->
<h2>Basic Dropdown/Dropdown Divider/Dropdown Header/Disable and Active items</h2>
<div class="dropdown"><!--data-toggle:data계열 속성을 dropdown을 줘야됨-->
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
메뉴
</button>
<div class="dropdown-menu">
<div class="dropdown-header">게시판메뉴</div><!--Dropdown Header-->
<a class="dropdown-item disabled" href="#" >공지사항</a><!--a태그에 dropdown-item을 줌,#은 현재 페이지-->
<a class="dropdown-item" href="#">Q&A</a>
<a class="dropdown-item" href="#">자유게시판</a>
<div class="dropdown-divider"></div><!--Dropdown Divider-->
<div class="dropdown-header">회원메뉴</div><!--Dropdown Header-->
<a class="dropdown-item active" href="#">로그인</a>
<a class="dropdown-item" href="#">회원가입</a>
</div>
</div>
<h2>Dropdown Position</h2>
<div class="d-flex justify-content-between">
<div class="dropdown dropright">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<div class="dropdown dropleft">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropleft
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
<h2>Dropdown Menu Right</h2>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Wide dropdown button to demonstrate this example
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<h2>Grouped Buttons with a Dropdown</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<h2>Split Button Dropdowns</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<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>
<h2>자바스크립트로 드랍다운 구현하기:버튼의 data-toggle="dropdown"속성 제거</h2>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<!--
<button type="button" class="btn btn-primary dropdown-toggle">
-->
자바스크립트
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div><!--container-->
<script>
/*
//바닐라 자바스크립트로 구현:버튼의 data-toggle="dropdown"속성 불필요
var dropdownButton = document.querySelector('div > div:nth-child(13) > button');
var dropdownMenuDiv = document.querySelector('div > div:nth-child(13) > div');
var toggle=false;
dropdownButton.onclick=function(){
if(!toggle) dropdownMenuDiv.style.display='block';
else dropdownMenuDiv.style.display='none';
toggle= !toggle;
};*/
//dropdown 메뉴 관련 이벤트 처리 선행조건
//1. DOM객체가 아닌 jQuery객체에 부착해야한다
//2. data-toggle="dropdown" 속성 반드시 추가하고 버튼에 dropdown()함수를 적용해야 한다
var jQueryButton = $('div > div:nth-child(13) > button');
var jQueryDiv = $('div > div:nth-child(13)');
console.log(jQueryDiv);
jQueryButton.dropdown();
jQueryDiv.on('show.bs.dropdown',function(){
console.log('show.bs.dropdown이벤트 발생');
});
jQueryDiv.on('shown.bs.dropdown',function(){
console.log('shown.bs.dropdown이벤트 발생');
});
jQueryDiv.on('hide.bs.dropdown',function(){
console.log('hide.bs.dropdown이벤트 발생');
});
jQueryDiv.on('hidden.bs.dropdown',function(){
console.log('hidden.bs.dropdown이벤트 발생');
});
</script>
</body>
</html>
결과)
Collapsible19.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Collapse19.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Collapse19.html</h1>
<p>Collapsibles are useful when you want to hide and show large amount of content</p>
</div><!--jumbotron-->
<h2>Basic Collapsible</h2>
<!--
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
-->
<!--위의 버튼대신 a태그 사용시 data-target="#demo"불필요
대신 href속성에 id값 지정
-->
<a href="#demo" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a>
<!--처음부터 컨텐츠를 보여주고자할때는 show클래스 추가-->
<div id="demo" class="collapse show">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h2>Accordion</h2>
<!--
data-parent- 속성은 해당 Collapsable item이 보여질때
다른 Collapsable item을 닫을때 사용하는 속성이다.
카드의 헤더 안에 있는 링크 클릭시 카드 바디를 보여주는 아코디언
-->
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<!--처음부터 컨텐츠를 보여주고자할때는 show클래스 추가-->
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
<h2>자바스크립트로 Collapse(펼치다) 구현하기</h2>
<button type="button" class="btn btn-primary">Toggle</button>
<button type="button" class="btn btn-success">Show</button>
<button type="button" class="btn btn-warning">Hide</button>
<button type="button" class="btn btn-info"> 바닐라 자바스크립트</button>
<div class="collapse" id="collapse">
orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<script>
//제이쿼리로 구현
$('button.btn.btn-primary').on('click',function(){
$('#collapse').collapse('toggle');
});
$('button.btn.btn-success').on('click',function(){
$('#collapse').collapse('show');
});
$('button.btn.btn-warning').on('click',function(){
$('#collapse').collapse('hide');
});
$('#collapse').on('show.bs.collapse',function(){
console.log('show.bs.collapse이벤트');
});
$('#collapse').on('shown.bs.collapse',function(){
console.log('shown.bs.collapse이벤트');
});
$('#collapse').on('hide.bs.collapse',function(){
console.log('hide.bs.collapse이벤트');
});
$('#collapse').on('hidden.bs.collapse',function(){
console.log('hidden.bs.collapse이벤트');
});
/*
//바닐라 자바스크립트로 구현-이벤트 처리는 못한다
var button =document.querySelector('button.btn.btn-info');
var collapse = document.querySelector('#collapse');
var toggle =false;
button.onclick=function(){
//collapse라는 아이디를 가진 DIV를 펼쳤다 접었다(Collapsible)
if(!toggle) collapse.style.display='block';
else collapse.style.display='none';
toggle = !toggle;
};*/
</script>
</div><!--container-->
</body>
</html>
결과)
Navs20.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Navs20.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Navs</h1>
<p>If you want to create a simple horizontal menu, add the .nav class to a <ul> element,<br/> followed by .nav-item for each <li> and add the .nav-link class to their links</p>
</div><!--jumbotron-->
<h2>Nav Menus</h2>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<h2>Aligned Nav</h2>
<div class="row">
<div class="col-lg bg-warning">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-lg bg-danger">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<h2>Vertical Nav</h2>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<h2>Tabs/Pills/Justified Tabs/pills</h2>
<!--md이상은 3분할,sm은 2분할,sm미만은 세로배치-->
<div class="row">
<div class="col-sm-6 col-md-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-4">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-sm col-md-4">
<!--nav-justified:각 메뉴가 동일한 크기로 부모영역을 채운다-->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<h2>Pills with Dropdown</h2>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<h2>Toggleable / Dynamic Pills</h2>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!--Nav메뉴 클릭시 컨텐츠 링크-->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
<h2>자바스크립트로 구현</h2>
<!--a태그의 data-toggle="tab" 속성 제거-->
<!--ul태그에 id="nav-tabs" 추가-->
<!--메뉴인 a요소에 tab('show')함수 적용-->
<ul class="nav nav-pills" id="nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#home_">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1_">Menu1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2_">Menu2</a>
</li>
</ul>
<div class="tab-content">
<div id="home_" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1_" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2_" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div><!--container-->
<script>
$('#nav-pills a').click(function(){
$(this).tab('show');
});
</script>
</body>
</html>
결과)
NavigationBar21_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>NavigationBar21_1.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body>
<!--nav태그는 container 혹은 container-fluid 클래스 위에 위치한다-->
<!--becomes vertical on small screens(576px)-->
<!--navbar클래스만 설정시 Vertical Navbar가 된다 즉 navbar-expand-sm 제거-->
<!--
Aligned Navbar(Centered Navbar)구현시
justify-content-center추가시 메뉴들이 가운데 정렬
justify-content-end는 오른쪽 정렬
단,로고는 왼쪽 끝 ,메뉴들은 오른쪽 끝에 정렬하면
justify-content-between
-->
<!--
Colored Navbar구현시에는
네비게이션바의 배경색은 bg-계열로 설정하고
텍스트 메뉴는 navbar-dark(배경색이 어두운 계열일때) 혹은
navbar-light(배경색이 흰색계열일때)지정하자
navbar-dark와 navbar-light는 nav태그에 지정한다
-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-between">
<!--
<nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-end">
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-end">
-->
<!--Brand / Logo 표시-->
<!--텍스트 로고-->
<!--
<a class="navbar-brand" href="#">KOSMO</a>
-->
<!--이미지 로고-->
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="KOSMO" style="width:70px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<div class="container">
<!--
<div class="d-flex flex-column align-items-center">
<h1>Navigation Bar</h1>
<p>A navigation bar is a navigation header that is placed at the top of the page</p>
</div>
-->
<div class="jumbotron bg-info">
<h1>Navigation Bar</h1>
<p>A navigation bar is a navigation header that is placed at the top of the page</p>
</div><!--jumbotron-->
<!--여기에 컨텐츠 배치-->
</div><!--container-->
</body>
</html>
결과)
NavigationBar21_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>NavigationBar21_2.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body>
<!--justify-content-between:nav에 주지말고 메뉴를 감싸는 div에 주자-->
<!--Collapsing The Navigation Bar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--Brand / Logo 표시-->
<!--텍스트 로고-->
<a class="navbar-brand" href="#">KOSMO</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<!-- Navbar text-->
<span class="navbar-text">
여러분을 위한 플랫폼
</span>
<!-- Links -->
<ul class="navbar-nav mr-3"><!--mr-3은 Navbar text와의 여백용-->
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Link 2</a>
</li>
<!--Navbar With Dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Link 3</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">SubLink 1</a>
<a class="dropdown-item" href="#">SubLink 2</a>
<a class="dropdown-item" href="#">SubLink 3</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline" action="#">
<input class="form-control mr-sm-2" type="text" placeholder="검색어 입력">
<button class="btn btn-success" type="submit">검색</button>
</form>
</li>
</ul>
</div>
</nav>
<div class="container">
<!--
<div class="d-flex flex-column align-items-center">
<h1>Navigation Bar</h1>
<p>A navigation bar is a navigation header that is placed at the top of the page</p>
</div>
-->
<div class="jumbotron bg-info">
<h1>Navigation Bar</h1>
<p>A navigation bar is a navigation header that is placed at the top of the page</p>
</div><!--jumbotron-->
<!--여기에 컨텐츠 배치-->
</div><!--container-->
</body>
</html>
결과)
NavigationBar21_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>NavigationBar21_3.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body style="height:1500px"><!--고정된 네비게이션바 테스트를 위한 스타일(height:1500px)-->
<!--상단 고정-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!--
하단고정
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
-->
<!--Brand / Logo 표시-->
<a class="navbar-brand" href="#">KOSMO</a>
<!-- Navbar text-->
<span class="navbar-text">
솔로를 위한 플랫폼
</span>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<!-- Links -->
<ul class="navbar-nav mr-3"><!--mr-3은 Navbar text와의 여백용-->
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Link 2</a>
</li>
<!--Navbar With Dropdown-->
<!--하단고정일때는 dropdown을 dropup으로-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Link 3</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">SubLink 1</a>
<a class="dropdown-item" href="#">SubLink 2</a>
<a class="dropdown-item" href="#">SubLink 3</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline" action="#">
<input class="form-control mr-sm-2" type="text" placeholder="검색어 입력">
<button class="btn btn-success" type="submit">검색</button>
</form>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top: 80px;">
<div class="d-flex flex-column align-items-center">
<h1>Navigation Bar</h1>
<p>A navigation bar is a navigation header that is placed at the top of the page</p>
</div>
<!--여기에 컨텐츠 배치-->
</div><!--container-->
</body>
</html>
결과)
Forms22.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Forms22.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Forms</h1>
<p>
Form controls automatically receive some global styling with Bootstrap<br/>
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%<br/>
Bootstrap provides two types of form layouts:<br/>
Stacked (full-width) form<br/>
Inline form
</p>
</div><!--jumbotron-->
<h2>Stacked Form</h2>
<form>
<div class="form-group">
<label for="username">아이디</label>
<input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username">
</div>
<div class="form-group">
<label for="password">비밀번호</label>
<input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 저장
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
<h2>Inline Form/Inline Form with Utilities</h2>
<!--form-group 클래스 제거 즉 div제거-->
<!--Inline Form with Utilities:mr-2추가해서 보다 보기 좋게 -->
<form class="form-inline">
<label for="username" class="mr-2">아이디</label>
<input type="text" class="form-control mr-2" placeholder="아이디를 입력하세요" id="username">
<label for="password" class="mr-2">비밀번호</label>
<input type="password" class="form-control mr-2" placeholder="비밀번호를 입력하세요" id="password">
<div class="form-check mr-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 저장
</label>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
<h2>Form Row/Grid</h2>
<form>
<div class="form-row">
<div class="col-2 text-nowrap d-flex align-items-center" >
<label for="username">아이디</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="아이디를 입력하세요" id="username">
</div>
</div>
<div class="form-row my-2">
<div class="col-2 text-nowrap d-flex align-items-center" >
<label for="password">비밀번호</label>
</div>
<div class="col">
<input type="password" class="form-control" placeholder="비밀번호를 입력하세요" id="password">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 저장
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
<h2>Form Validation</h2>
<!--
form태그에 was-validated 혹은 needs-validation클래스 추가하여
폼의 유효성 체크 하기
-제출전 유효성 체크시:was-validated
<form class="was-validated" action="https://www.nate.com">
-->
<!--
제출후(즉 submit이벤트 발생시) 체크시:needs-validation
폼의 하위요소에 required속성 추가후
novalidate속성을 폼요소에 추가하면 HTML5의 기본 유효성 체크 상자가 아닌
자바스크립트로 처리한 유효성 메시지를 띄울 수 있다
-->
</div><!--container-->
</body>
</html>
결과)
