Bootstrap 테스트 페이지

Bootstrap이란 HTML5, CSS3, Javascript를 이용하여 모바일 환경에 자동 적응하는 웹사이트를 만드는 새로운 프레임워크입니다. 이것을 사용하려면 bootstrap.min.css, bootstrap.min.js, jquery.min.js 파일을 링크로 포함해서 써야 합니다. 이 문서의 소스를 참조하세요. 이것의 효과를 테스트해보기 위해서는 브라우저의 폭을 줄여보거나 이 페이지를 모바일 브라우저에서 열어보세요.

Bootstrap?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!

What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs

Why Use Bootstrap?

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

테이블 만들어보기

Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

드롭다운 메뉴 만들기

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".

My first Bootstrap website!

This page will grow as we add more and more components from Bootstrap...

Search

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.