집 > 기사 > 웹 프론트엔드 > bootstrap3 그리드 system_javascript 기술 사용 방법 알아보기

bootstrap3 그리드 system_javascript 기술 사용 방법 알아보기

WBOY원래의: 2016-05-16 15:06:001644검색

1. 부트스트랩 개발 환경 설정
1. 부트스트랩 다운로드, http://www.bootcss.com/
2. jquery를 다운로드하고 IE를 통해 직접 액세스http://code.jquery.com/jquery-2.0.3.min.js
3. bootstrap 및 jquery의 js 및 css 파일을 html 페이지로 가져오고 .viewport의 e8e496c15ba93d81f6ea4fe5f55a2244 태그를 사용하면 IE 9인 경우 추가할 수 있습니다. ie9 이하의 호환성.
템플릿은 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[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]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    
  </div>
</body>
</html>

2. 그리드 시스템
1. Boostrap은 레이아웃을 위해 데스크톱을 12행 * n열의 테이블로 나눕니다.
2. .row는 행 수준 분할을 수행하며 .container 아래에 포함되어야 합니다.
3. col-xx-*는 아래와 같이 열 단위로 나누기를 수행합니다

<div class="container">
    <div class="row">
      <div class="col-md-3">1</div>
      <div class="col-md-3">2</div>
      <div class="col-md-3">3</div>
      <div class="col-md-3">4</div>
    </div>
    <div class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3">7</div>
      <div class="col-md-3">8</div>
    </div>
  </div>

4. 열 오프셋, 은 col-xx-offset-*
을 통해 달성됩니다.

  <div class="container">
    <div class="row">
      <div class="col-md-3">1</div>
      <div class="col-md-3">2</div>
      <div class="col-md-3">3</div>
      <div class="col-md-3">4</div>
    </div>
    <div class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3 col-md-offset-3">7</div>
    </div>
  </div>

5. 열 정렬, 은 .col-xx-push-* 및 .col-xx-pull-*를 통해 열을 왼쪽 또는 오른쪽으로 정렬할 수 있습니다.

  <div class="container">
    <div class="row">
      <div class="col-md-3">1</div>
      <div class="col-md-3">2</div>
      <div class="col-md-3 col-md-push-3">3</div>
    </div>
    <div class="row">
      <div class="col-md-3">5</div>
      <div class="col-md-3">6</div>
      <div class="col-md-3 col-md-pull-2">7</div>
    </div>
  </div>

6. 열 중첩 , 행은 열에 중첩될 수 있습니다.

    <div class="row">
      <div class="col-md-3">1</div>
      <div class="col-md-3">2</div>
      <div class="col-md-3">3</div>
      <div class="col-md-3">
        <div class="row">
          <div class="col-md-1">5</div>
          <div class="col-md-1">6</div>
          <div class="col-md-1">7</div>
        </div>
      </div>
    </div>

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：zTree 플러그인 드롭다운 tree_javascript 기술 사용에 대한 소개 튜토리얼다음 기사：zTree 플러그인 드롭다운 tree_javascript 기술 사용에 대한 소개 튜토리얼

bootstrap3 그리드 system_javascript 기술 사용 방법 알아보기

관련 기사