twitter-bootstrap-3twitter-bootstrap-3 시작하기


비고

부트 스트랩은 웹 사이트 및 웹 응용 프로그램을 디자인하기위한 무료 오픈 소스 프런트 엔드 웹 프레임 워크입니다. 여기에는 타이포 그라피, 폼, 버튼, 네비게이션 및 기타 인터페이스 컴포넌트뿐만 아니라 선택적 자바 스크립트 확장을위한 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다. 많은 웹 프레임 워크와는 달리 프론트 엔드 개발에만 관심이 있습니다.

Bootstrap은 GitHub에서 두 번째로 별표가 표시된 프로젝트로 거의 100,000 개의 별과 거의 45,000 개의 포크가 있습니다.

버전

번역 출시일
3.3.7 2016-07-25

부트 스트랩 설치 및 시작

소개
따라서 프로젝트에 부트 스트랩을 사용하기를 원하십니까? 큰! 그럼 당장 시작하자!.

부트 스트랩이란 무엇입니까? 부트 스트랩은 반응 형 디자인과 간단한 코드를 사용하여 반응이 빠른 프로젝트를 만드는 데 사용할 수있는 오픈 소스 라이브러리입니다. 반응 형 디자인은 시스템의 설계 (표현 및 레이아웃)가 장치의 레이아웃에 따라 반응 / 적응하는 설계 철학입니다. 디자인을 신속하게 유지하는 주된 이유는 일련의 장치를 사용하여 응용 프로그램의 범위를 더 큰 사용자 기반으로 늘리는 것입니다.
설치
부트 스트랩은 여러 가지 다른 방식으로 설치 될 수 있으며 많은 종류의 프로젝트에 설치할 수 있습니다. 아래 목록에서 부트 스트랩을 설치하는 방법에 대한 다운로드 및 자습서 링크를 배치했습니다.
다운로드 링크

기본 정보
이제 프로젝트에 부트 스트랩을 설치했습니다. 그리고 이제는 부트 스트랩의 큰 장점을 사용하기 시작할 때입니다. 우선 부트 스트랩의 기본 사용법을 설명하겠다. 그 다음에는 몇 가지 작은 예제를 보여줄 것이고 마지막에는 시작 템플릿으로 사용할 수있는 시작 코드 예제를 줄 것이다.

그리드 시스템
부트 스트랩은 그리드 시스템을 사용합니다. 이 그리드 시스템은 일반적으로 12 개의 열로 구성됩니다. 이 12 개의 열은 모두 동일한 너비이지만 높이가 다를 수 있습니다.

그래서 우리는 12 개의 열로 구성된 그리드 시스템을 가지고 있습니다. 이 열을 사용하여 기본 웹 사이트를 구축 할 수 있습니다. 우리는 다음과 같은 레이아웃을 달성하기를 원한다 :

메뉴 - 전체 너비
사이드 바 - 화면의 1/3
메인 컨텐츠 화면의 2/3
꼬리말 - 전체 너비

메뉴
먼저 메뉴를 살펴 보겠습니다. 우리가 알고 있듯이 그리드 시스템은 12 개의 열로 작동합니다. 전체 너비의 메뉴를 원하기 때문에 메뉴를 12 열 모두에 넣어야합니다. 아래 예와 같이 보입니다.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

메뉴에 col-lg-12 클래스를 지정하면 다음과 같이 나타납니다.
col - classname의 col는 열을 나타냅니다.
lg - classname의 lg는 화면의 너비를 나타냅니다.
12 - 클래스 이름에있는 12는 우리 메뉴에 필요한 열의 수를 나타냅니다. 이 경우 전체 폭의 메뉴를 원하기 때문에 우리는 12 개의 모든 열 (12/12)을 얻습니다.

12 개의 열 중 12 개의 열을 메뉴에 사용 했으므로 메뉴가 새로운 행에 설정됩니다.

사이드 바
템플릿에 추가하려는 두 번째 항목은 사이드 바입니다. 이제 우리는 사이드 바가 화면의 1/3이되기를 바랍니다. 그래서 우리가하려고하는 것은 3의 12 개의 열을 4로 나누는 것입니다. 이제는 화면의 1/3에 도달하기 위해 채우기를 원하는 열의 수를 알 수 있습니다. 아래 코드를 따르십시오.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

메뉴와 마찬가지로 지금 우리의 숫자는 메뉴와 다릅니다.
col - classname의 col는 열을 나타냅니다.
lg - classname의 lg는 화면의 너비를 나타냅니다.
4 - classname의 12는 사이드 바에 보유 할 열의 수를 나타냅니다. 이 경우 화면의 1/3을 사이드 바에 채워서 12 개의 열 중 4 개 (4/12) 만 가져옵니다.

콘텐츠
이제이 행에서 사이드 바 옆에 8 개의 열이 남아 있습니다. 이제 우리는 우리의 콘텐츠로 그것들을 채울 것입니다. 아래 예제 코드를 참조하십시오.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

이 행에있는 12 개의 열의 나머지 8 개의 열을 채운 이후로 다음 섹션은 12 개의 열이있는 새로운 행에서 다시 시작됩니다.

꼬리말
꼬리말은 화면의 전체 너비 블록이 될 메뉴와 마찬가지로 다시 바닥 글을 위해이 행의 12 열을 모두 가져옵니다. 아래 예제 코드를 참조하십시오.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

이제 우리는 첫 번째 부트 스트랩 템플릿을 아주 작은 html 파일로 만들었습니다. 그러나 이것이 바로 기본입니다. 일반적으로 우리는이 코드를 부트 스트랩 경험 전체에 조금 더 넣을 것입니다. 이러한 경험 중 일부는 아래에 설명되어 있습니다.

행과 컨테이너 사용 위의 간단한 예제에서 말했듯이 부트 스트랩은 12 개의 행을 사용합니다. 행이 12 열로 채워지면 부트 스트랩이 새 행에서 시작됩니다. 이 행을 표시하는 가장 좋은 방법은 행 클래스를 사용하는 것입니다. 컨테이너 클래스도 사용합니다. 이것은 body 태그와 같습니다.이 컨테이너에는 코드를 모두 넣을 것입니다. 컨테이너 또는 컨테이너 유체 클래스 중 하나를 선택할 수 있습니다. 유일한 차이점은 컨테이너 - 유체 클래스는 화면의 전체 너비를 사용하고 컨테이너 클래스는 그렇지 않다는 것입니다. 이러한 기본 기능의 예가 아래와 같습니다.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

이제 부트 스트랩으로 전체 페이지 템플릿을 만들었습니다. 그것은 매우 단순한 것이지만 기초부터 시작하고 나중에 모든 종류의 부트 스트랩 클래스와 기능을 사용할 수 있습니다. 마지막 것. 클래스의 lg - md - sm 및 xs 열 이름은 해당 페이지의 너비를 말한 것과 같습니다. LarGe, MeDium, SMall 및 XSmall. 열의 양을 변경하여 다른 너비에 대해 다르게 스타일을 적용 할 수 있다는 것을 잊지 마십시오. 전체 행이 12 개의 열로 구성된다는 것을 기억하십시오!

자세한 내용은 http://getbootstrap.com/ <br? 훌륭한 예를 보려면 http://expo.getbootstrap.com 또는 http://bootsnipp.com/을 방문하십시오.

더 많은 정보를 추가하길 원하거나 몇 가지 문제점을 발견하면 알려주십시오! 그리고 모두에게 행복한 코딩!

안녕하세요 세계

다음 HTML 페이지는 Bootstrap 3 사용하는 간단한 Hello World 페이지를 보여줍니다.

이 페이지에는 예제 링크와 드롭 다운 컨트롤이있는 전체 너비 탐색 모음이 있습니다. 탐색 모음은 부트 스트랩의 모바일 기능을 활용합니다. 사용 가능한 뷰포트 너비가 증가함에 따라 모바일보기에서 접히기 시작하고 가로가됩니다.

또한, jumbotron 요소는 주요 정보를 표시하는 데 사용되었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <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">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

설치

용법

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

부트 스트랩 js 파일에 대한 참조는 body 태그 바로 위에있는 script 태그를 사용하여 이루어집니다 (아래 참조). 또한 부트 스트랩은 대부분 위젯을 위해 jQuery를 사용합니다 (예 : 아코디언 회전식 등). jQuery js 파일 아래에 참조 부트 스트랩 js 파일이 있습니다.

**견본**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <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">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>