Bootstrap Example

**) * 행안에 적절한 수의 열(column)을 추가한다. (**

.col-sm-4

**) * 행안의 열의 수는 항상 12열을 맞춰야 한다. ===그리드 예제 : Stacked-to-horizontal===



 


  Bootstrap Example
  
  
  	
	
	




  Grid
  This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).      
  Resize the browser window to see the effect.      
  
    
      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.

{{:egovframework:rte3.6:ptl:grid_exam1.png|그리드 예제1}} 결과 보기 : https://jsfiddle.net/eh5kmtt9/1/?utm_source=website&utm_medium=embed&utm_campaign=eh5kmtt9\\ \\ 결과창의 좌우폭을 확대 및 축소를 해보면, 화면 사이즈에 맞춰서 열(column)이 쌓이거나(stack) 수평이 되게 늘어나는 것을 확인 할 수 있다.이와 같이 손 쉽게 반응형을 지원하고, 페이지 레이아웃을 구성할 수 있다. \\ 그 밖의 예제들은 부트스트랩 사이트 그리드 부분(http://getbootstrap.com/css/#grid)에서 내용을 확인하도록 한다. ====다양한 스타일의 CSS==== 부트스트랩은 깔끔하고 잘 정돈된 느낌의 다양한 스타일의 CSS를 제공한다. 자세한 내용은 링크(http://getbootstrap.com/css/)의 내용을 확인하도록 한다. ===테이블=== 다음은 부트스트랩에서 제공하는 클래스를 적용한 테이블 예제이다.






  Bootstrap Example
  
  
  
  
  




  Contextual Classes
  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
        example1@example.com
      
      
        Mary
        Moe
        example2@example.com
      
      
        July
        Dooley
        example3@example.com

Firstname	Lastname	Email
John	Doe	example1@example.com
Mary	Moe	example2@example.com
July	Dooley	example3@example.com

결과보기 : https://jsfiddle.net/r60oymr2/3/?utm_source=website&utm_medium=embed&utm_campaign=r60oymr2 \\ {{:egovframework:rte3.6:ptl:css_table.png|css table}} \\ 부트스트랩에서 기본적으로 제공하는 테이블 디자인 중 하나이다. ===폼=== 다음은 부트스트랩에서 제공하는 폼의 예제이다.






  Bootstrap Example
  
  
  
  
  




  Inline form
  Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.
  
    
      Email:
      
    
    
      Password:
      
    
    
       Remember me

결과보기 : https://jsfiddle.net/4006oqs0/1/?utm_source=website&utm_medium=embed&utm_campaign=4006oqs0 \\ {{:egovframework:rte3.6:ptl:css_form.png?900x250|css form}} \\ 위의 예제는 인라인 폼(inline form)이 적용 된 예제로, 화면의 폭에 따라 입력창의 위치가 변화한다. ===버튼=== 다음은 부트스트랩에서 제공하는 버튼 디자인이다.






  Bootstrap Example
  
  
  
  
  
  




  Button

결과보기 : https://jsfiddle.net/ysohpdqh/5/?utm_source=website&utm_medium=embed&utm_campaign=ysohpdqh \\ {{:egovframework:rte3.6:ptl:css_button.png?700x180|css button}} \\ ====컴포넌트==== 부트스트랩에서는 iconography, dropdown, input group, navigation, alerts 등의 재사용 가능한 컴포넌트를 제공하고 있다. 본 가이드에서는 몇 가지 컴포넌트만 소개한다. \\ 그 밖의 다른 컴포넌트 들은 링크(http://getbootstrap.com/components/)를 통해 확인 하도록 한다.\\ ===Glyphicons=== 250개 이상의 기호가 Glyphicon Halflings 세트로 폰트 포멧에 포함되어 있다. \\ \\ {{:egovframework:rte3.6:ptl:component_glyphicons.png?700x600|Glyphicons}} \\ ==사용방법== 사용할 부분에 다음 구문을 삽입한다.

위의 구문에서 원하는 Glyphicon의 **class**를 교체하여 사용한다. \\ \\ 다음은 Glyphicon을 사용한 예제이다.






  Bootstrap Example
  
  
    	
	
	




  Glyphicon Examples
  Envelope icon:     
  Envelope icon as a link:
    
  
  Search icon: 
  Search icon on a button:
    
  
  Search icon on a styled button:
    
  
  Print icon:       
  Print icon on a styled link button:
    
       Print

결과보기 : https://jsfiddle.net/t1tresaj/1/?utm_source=website&utm_medium=embed&utm_campaign=t1tresaj \\ {{:egovframework:rte3.6:ptl:component_exam_glyphicons.png?800x350|glyphicon exam}} \\ ===페이지네이션(Pagination)=== 페이지네이션 컴퍼넌트로 사이트나 앱을 위한 페이지네이션 링크를 제공한다. ==사용법== 페이지네이션의 경우 **순서가 없는 목록**(unordered list,






  Bootstrap Example
  
  
  
  
  




  Pagination - Active State
  Add class .active to let the user know which page he/she is on:
  
    1
    2
    3
    4
    5

)에 **.active** class를 추가하면, 해당 링크는 활성 상태가 된다. 클릭할 수 없는 링크일 경우 **.disable**을 사용하면 비활성 상태로 된다. ====자바스크립트==== 부트스트랩 내에 존재하는 UI 컴포넌트에 동적인 인터랙션이 필요한 컴포넌트는 12개가 넘는 jQuery plugin을 통하여 컨트롤 할 수 있도록 되어있다. \\ 단 컴포넌트를 주의할 점은 모든 플러그인은 jQuery에 의존하기 때문에 jQuery는 반드시 플러그인 파일 전에 포함되어야 한다. \\ 본 가이드에서는 모달(modal)에 대한 가이드만 제공한다.\\ ===모달(Modal)=== 모달 플러그인은 현재 페이지의 상단에 표시되는 대화 상자 / 팝업 창이다. * 다른 모달이 보이는 동안에 모달은 열리지 않는다. * 다른 콤포넌트가 모달의 모습이나 기능에 영향을 끼치지 않도록 항상 모달의 HTML 코드를 문서 상단에 위치한다. * 모바일 기기에서는 제약사항이 있다. * 플러그인 사용 시 개별적("modal.js")으로 include하거나, 전체( "bootstrap.js" 또는 "bootstrap.min.js")를 include하여 사용할 수 있다. ==사용법== 다음은 기본적인 modal을 만드는 방법을 보여주는 예제이다. Bootstrap Example Modal Example Modal Header Some text in the modal. 결과보기 : https://jsfiddle.net/eqfmxd3e/1/?utm_source=website&utm_medium=embed&utm_campaign=eqfmxd3e \\ {{:egovframework:rte3.6:ptl:modal_exam.png?900x300|modal exam}} \\ \\ 위의 예제의 구조를 보면 크게 "Triger", "Modal", "Modal content"로 구성된 것을 확인할 수 있다. \\ \\ "Trigger" 부분 \\ 모달 윈도우를 호출하려면 트리거가 필요하다. 보통 버튼이나 링크를 트리거로 사용한다.\\ 그리고 두개의 **"data-*"** 속성을 include 해야한다. \\ * **data-toggle="modal"** : 모달 윈도우를 연다. * **data-target="#myModal"** : 모달 윈도우를 열 id "Modal" 부분 * 모달의 부모 **
**에는 모달**("myModal")**을 트리거하기 위해 사용되는 **"data-target**의 속성 값과 동일한 ID를 가져야한다. * **.modal** 클래스는 content에서 modal의
를 식별하고, 그것을 focus로 가져온다. * **.fade** 클래스는 모달 안과 밖으로 fade 전환 효과를 추가해 준다. 만약 효과를 사용하지 않으면 이 클래스를 삭제한다. * **role="dialog"** 속성은 스크린 리더를 사용하는 사람들에 대한 접근성을 향상시킨다. * **.modal-dialog** 클래스는 모달의 적절한 폭과 여백을 설정한다. "Modal content" 부분 * **"modal-content"** 클래스의 **
**는 모달의 스타일(border, background-color 등...)을 지정한다. 여기에 모달의 header, body, footer를 추가한다. * **.modal-header** 클래스는 모달의 header 스타일을 정의하는데 사용한다. * header 안의 **

My First Bootstrap Page

My First Bootstrap Page

Grid

Contextual Classes

Inline form

Button

Glyphicon Examples

Pagination - Active State

Modal Example