부트 스트랩 튜토리얼

Twitter Bootstrap은 최근 가장 인기있는 프런트 엔드 프레임 워크입니다. 빠르고 쉬운 웹 개발을위한 매끄럽고 직관적이며 강력한 모바일 퍼스트 엔드 프레임 워크입니다. HTML, CSS 및 Javascript를 사용합니다. 이 튜토리얼은 웹 프로젝트를 쉽게 만들 수있는 부트 스트랩 프레임 워크의 기본 사항을 알려줍니다. 튜토리얼은 Bootstrap 기본 구조, Bootstrap CSS, Bootstrap 레이아웃 구성 요소 및 Bootstrap 플러그인과 같은 섹션으로 나뉩니다. 각 섹션에는 간단하고 유용한 예와 함께 관련 항목이 포함되어 있습니다.

부트 스트랩을 배우는 이유?

Mobile first approach − Bootstrap 3, 프레임 워크는 별도의 파일 대신 전체 라이브러리에 걸쳐 Mobile First 스타일로 구성됩니다.
Browser Support − 모든 인기있는 브라우저에서 지원됩니다.

Easy to get started− HTML과 CSS에 대한 지식 만 있으면 누구나 Bootstrap을 시작할 수 있습니다. 또한 Bootstrap 공식 사이트에는 좋은 문서가 있습니다.
Responsive design− Bootstrap의 반응 형 CSS는 데스크톱, 태블릿 및 모바일에 맞게 조정됩니다. 반응 형 디자인에 대한 자세한 내용은 부트 스트랩 반응 형 디자인 장에 있습니다.

개발자를위한 인터페이스 구축을위한 깨끗하고 균일 한 솔루션을 제공합니다.
사용자 정의하기 쉬운 아름답고 기능적인 기본 제공 구성 요소가 포함되어 있습니다.
또한 웹 기반 사용자 정의를 제공합니다.
그리고 무엇보다도 그것은 오픈 소스입니다.

부트 스트랩을 사용하는 Hello World.

Bootstrap에 대한 약간의 흥미를 유발하기 위해, 저는 작은 일반적인 Bootstrap Hello World 프로그램을 제공 할 것입니다. 데모 링크를 사용하여 시도해 볼 수 있습니다.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

부트 스트랩의 응용

Scaffolding− Bootstrap은 그리드 시스템, 링크 스타일 및 배경과 함께 기본 구조를 제공합니다. 이것은 섹션에서 자세히 다룹니다.Bootstrap Basic Structure
CSS− Bootstrap은 전역 CSS 설정, 확장 가능한 클래스로 스타일이 지정되고 강화 된 기본 HTML 요소 및 고급 그리드 시스템의 기능을 제공합니다. 이것은 섹션에서 자세히 다룹니다.Bootstrap with CSS.
Components− Bootstrap에는 아이콘, 드롭 다운, 탐색, 경고, 팝 오버 등을 제공하도록 제작 된 재사용 가능한 구성 요소가 12 개 이상 포함되어 있습니다. 이것은 섹션에서 자세히 다룹니다.Layout Components.
JavaScript Plugins− Bootstrap에는 12 개 이상의 사용자 지정 jQuery 플러그인이 포함되어 있습니다. 모두 또는 하나씩 쉽게 포함 할 수 있습니다. 자세한 내용은 섹션에서 다룹니다.Bootstrap Plugins.
Customize − Bootstrap의 구성 요소, LESS 변수 및 jQuery 플러그인을 사용자 정의하여 고유 한 버전을 얻을 수 있습니다.

청중

이 튜토리얼은 HTML 및 CSS에 대한 기본 지식이 있고 웹 사이트를 개발하려는 욕구가있는 모든 사용자를 위해 준비되었습니다. 이 튜토리얼을 마치면 Twitter Bootstrap을 사용하여 웹 프로젝트를 개발하는 데 보통 수준의 전문 지식을 갖게됩니다.

전제 조건

이 자습서를 시작하기 전에 HTML 및 CSS의 기본 사항에 대해 이미 알고 있다고 가정합니다. 이러한 개념을 잘 모르면 HTML Tutorial 및 CSS Tutorial에 대한 짧은 자습서를 진행하는 것이 좋습니다.