부트스트랩 소개


부트스트랩이란 무엇인가요?

Bootstrap은 웹 애플리케이션 및 웹사이트의 신속한 개발을 위한 프런트 엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JAVASCRIPT를 기반으로 합니다.

History

Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton이 개발했습니다. 부트스트랩은 2011년 8월 GitHub에 출시된 오픈 소스 제품입니다.

부트스트랩을 사용하는 이유는 무엇인가요?

  • 모바일 우선: Bootstrap 3부터 프레임워크에는 전체 라이브러리에 걸쳐 모바일 우선 스타일이 포함됩니다.

  • 브라우저 지원: 모든 주요 브라우저는 부트스트랩을 지원합니다.

    Internet Explorer

  • 시작하기 쉽습니다: HTML과 CSS에 대한 기본 지식만 있으면 부트스트랩 학습을 시작할 수 있습니다.

  • 반응형 디자인: Bootstrap의 반응형 CSS는 데스크톱, 태블릿, 휴대폰에 맞게 조정됩니다. 반응형 디자인에 대한 자세한 내용은 Bootstrap 반응형 디자인을 참조하세요.

  • 개발자에게 인터페이스 생성을 위한 간결하고 통합된 솔루션을 제공합니다.

  • 강력한 내장 구성 요소가 포함되어 있으며 사용자 정의가 쉽습니다.

  • 웹 기반 사용자 정의도 제공합니다.

  • 오픈소스입니다.

Bootstrap 패키지 내용

  • 기본 구조: Bootstrap은 그리드 시스템, 링크 스타일 및 배경을 포함한 기본 구조를 제공합니다. 이에 대해서는 Bootstrap 기본 구조 섹션에서 자세히 설명하겠습니다.

  • CSS: Bootstrap에는 전역 CSS 설정, 기본 HTML 요소 스타일 정의, 확장 가능한 클래스 및 고급 그리드 시스템과 같은 기능이 포함되어 있습니다. 이에 대해서는 Bootstrap CSS 섹션에서 자세히 설명합니다.

  • Components: Bootstrap에는 이미지 생성, 드롭다운 메뉴, 탐색, 경고 상자, 팝업 상자 등을 위한 재사용 가능한 구성 요소가 12개 이상 포함되어 있습니다. 이에 대해서는 Layout Components 섹션에서 자세히 설명합니다.

  • JavaScript 플러그인: Bootstrap에는 12개 이상의 사용자 정의 jQuery 플러그인이 포함되어 있습니다. 모든 플러그인을 직접 포함하거나 개별적으로 포함할 수 있습니다. 이에 대해서는 Bootstrap Plugin 섹션에서 자세히 설명하겠습니다.


  • Customization: Bootstrap 구성 요소, LESS 변수 및 jQuery 플러그인을 사용자 정의하여 자신만의 버전을 얻을 수 있습니다.


온라인 예제

이 사이트의 Bootstrap 튜토리얼에는 수백 개의 예제가 포함되어 있습니다.

온라인 편집기를 사용하여 온라인으로 코드를 편집하고 실행 버튼을 클릭하여 결과를 확인할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>第一列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第二列</h3>
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>第三列</h3>        
      <p> php中文网</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

추가 인스턴스

인스턴스

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>表格</h2>
      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>Street</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Anna Awesome</td>
             <td>Broome Street</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Debbie Dallas</td>
             <td>Houston Street</td>
           </tr>
           <tr>
             <td>3</td>
             <td>John Doe</td>
             <td>Madison Street</td>
           </tr>
         </tbody>
       </table>
      </div>

      <h2>图像</h2>
      <p>创建相应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>            
      <img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 
      
      <h2>图标</h2>
      <p>插入图标:</p>      
      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>      
      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>            
      <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>      
      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>      
    </div>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스

"사용해 보기" 버튼을 클릭하여 어떻게 작동하는지 확인하세요.