Bootstrap HTML 5 CSS j Query DOCTYPE html
Bootstrap 구조와 이해 HTML 5 기반 CSS j. Query
파일을 다운로드하여 부트스트랩 사용 <!DOCTYPE html> 처음 브라우징 시에 설정 <html> width=device-width : 가로사이즈 width는 디바이스 사이즈 initial-scale=1 : 처음 로딩 화면 설정 <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap. min. css"> <script src="js/jquery-3. 3. 1. min. js"></script> <script src="js/bootstrap. min. js"></script> </head> Web. Content폴더 아래에 css폴더와 js폴더 생성 후에 다운로드한 파일들을 복사해 넣 는다.
CDN을 이용하여 부트스트랩 사용 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https: //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/css/bootstrap. min. css"> <script src="https: //code. jquery. com/jquery-3. 3. 1. min. js"></script> <script src="https: //maxcdn. bootstrapcdn. com/bootstrap/3. 3. 7/js/bootstrap. min. js"></script> </head> 파일들이 있는 url을 적어준다.
예제 <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="jumbotron"> <h 1><span class="glyphicon-thumbs-up"></span> Hello, world!</h 1> <p>Bootsrtap 성공!</p> <p><a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Learn more</a></p> </div> <script> $( function () { $( '[data-toggle="tooltip"]' ). tooltip(); } ); </script> </body> </html>
3개의 같은 컬럼 만들기 예제 <body> <div class="container-fluid"> <h 1>Hello World!</h 1> <p>브라우저 크기를 변경해 보세요. </p> <div class="row"> <div class="col-sm-4" style="background-color: lavender; ">. col-sm-4</div> <div class="col-sm-4" style="background-color: lavenderblush; ">. col-sm-4</div> <div class="col-sm-4" style="background-color: lavender; ">. col-sm-4</div> </body>
2개의 다른 컬럼 만들기 예제 <body> <div class="container-fluid"> <h 1>Hello World!</h 1> <p>Resize the browser window to see the effect. </p> <div class="row"> <div class="col-sm-4" style="background-color: lavender; ">. col-sm-4</div> <div class="col-sm-8" style="background-color: lavenderblush; ">. col-sm-8</div> </body>
Bootstrap Text/Typography <h 1>~<h 6> Bootstrap의 기본 글자 크기는 14 px <body> <div class="container"> <h 1>h 1 Bootstrap heading <h 2>h 2 Bootstrap heading <h 3>h 3 Bootstrap heading <h 4>h 4 Bootstrap heading <h 5>h 5 Bootstrap heading <h 6>h 6 Bootstrap heading </div> </body> (36 px)</h 1> (30 px)</h 2> (24 px)</h 3> (18 px)</h 4> (14 px)</h 5> (12 px)</h 6>
Bootstrap Text/Typography <small> <body> <div class="container"> <h 1>Lighter, Secondary Text</h 1> <p> small 태그는 좀 더 밝게 표시 </p> <h 1>h 1 heading <small>secondary text</small></h 1> <h 2>h 2 heading <small>secondary text</small></h 2> <h 3>h 3 heading <small>secondary text</small></h 3> <h 4>h 4 heading <small>secondary text</small></h 4> <h 5>h 5 heading <small>secondary text</small></h 5> <h 6>h 6 heading <small>secondary text</small></h 6> </div> </body>
Bootstrap Text/Typography <mark> <body> <div class="container"> <h 1>Highlight Text</h 1> <p> mark 태그 <mark>highlight</mark> 사용 </p> </div> </body>
Bootstrap Text/Typography <abbr> <body> <div class="container"> <h 1>약어</h 1> <p> abbr 태그는 약어표시 설명에 사용 </p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p> </div> </body>
Bootstrap Text/Typography <kbd> <body> <div class="container"> <h 1>Keyboard Inputs</h 1> <p> kbd 태그는 키보드 입력 표시에 사용 </p> <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box. </p> </div> </body>
Bootstrap Text/Typography <code> <body> <div class="container"> <h 1>Code Snippets</h 1> <p>다음 HTML 태그: <code>span</code>, <code>section</code>, and <code>div</code> 는 문서의 섹션을 정의한다. </p> </div> </body>
- Slides: 26
