http://getbootstrap.com/ - 부트스트랩
부트스트랩은 기본적으로 HTML5 부터 구동이 된다. 이전버전에서 실행했는데 안된다고 하는 경우가 많다.
예제파일:
bootstrap.war1. 새로운 프로젝트 생성 본인은 bootstrap 로 생성함.
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3. 2번에서 준비 안된것이 있다. 바로 스트랩트 src 에 js파일은 없기때문에 주소로 src를 잡아줘야 한다.
그럼 주소를 찾아야하는데 첫번째로
http://getbootstrap.com/getting-started/ 에 들어가서 Bootstrap CDN 에 있는
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 를 복사 해서 html 파일에 넣어준다. <script src="js/bootstrap.min.js"></script> 이코더 를 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" 로 바꿔준다.
- http://getbootstrap.com/components/#navbar - Navbar (대메뉴) - Default navbar 에서
소스를 복사 하고 실행 하면 탬플렛 끝 ~! 웹사이트의 성질에 맞게 메뉴이름을 바꾸고
사용하면 끝 !! 참 쉽죠잉 ~!
view
늘린화면
줄인화면
