[부트스트랩] datetimepicker, selectpicker 사이트
부트스트랩3 datetimepicker : http://eonasdan.github.io/bootstrap-datetimepicker/Functions/
부트스트랩3 Select : https://silviomoreto.github.io/bootstrap-select/
'개발 > [웹프론트] 부트스트랩(bootstrap)' 카테고리의 다른 글
| 부트스트랩 navbar 가운데 로고 넣기 (0) | 2016.10.21 |
|---|---|
| carousel의 carousel-inner 검정 배경 전체로 채우기 (0) | 2016.10.21 |
| 부트스트랩 가운데 정렬 (0) | 2016.10.13 |
| 부트 스트랩 공부하면서 정리한 것 (w3school) (1) | 2016.10.03 |
부트스트랩 navbar 가운데 로고 넣기
<div class="container">
<!-- 상단 네비게이트 바 -->
<div class="navbar nav-tabs navbar-fixed-top" style="background-color:white; border-bottom:1px solid gray">
<div class="container">
<!-- 왼쪽 메뉴 버튼 -->
<div class="col-xs-3" style="background-color:white">
<button type="button" class="btn btn-default" style="margin-top:4px">
<span class="glyphicon glyphicon-align-justify" style="font-size:25px"></span>
</button>
</div>
<!-- 가문데 로고 -->
<div class="col-xs-6" style="background-color:white-space; text-align:center; display:inline-block;">
<button type="button" class="btn btn-default btn-lg" style="margin-top:2px">
트래블쉽
</button>
</div>
<!-- 오른쪽 로그인, 회원가입-->
<div class="col-xs-3" style="background-color:white">
<button type="button" class="btn btn-default" style="margin-top:10px; float:right;">
<span class="glyphicon glyphicon-user"> 로그인 </span>
</button>
</div>
</div>
</div>
</div>
'개발 > [웹프론트] 부트스트랩(bootstrap)' 카테고리의 다른 글
| [부트스트랩] datetimepicker, selectpicker 사이트 (0) | 2016.11.10 |
|---|---|
| carousel의 carousel-inner 검정 배경 전체로 채우기 (0) | 2016.10.21 |
| 부트스트랩 가운데 정렬 (0) | 2016.10.13 |
| 부트 스트랩 공부하면서 정리한 것 (w3school) (1) | 2016.10.03 |
carousel의 carousel-inner 검정 배경 전체로 채우기
carousel
*는 직접 입력하시면 됩니다.
<div class="item active">
<img src="1.jpg" alt="*" width="*" height="*" style="background-color:rgba( 0, 0, 0, 0.5 );">
<div class="carousel-caption" style="background-color:rgba( 0, 0, 0, 0.5 ); position:absolute; left:0; top:0%;width:100%; height:100%;">
<div class="text-center">
<h1 style="text-align:center"> 타이틀 </h1>
<p>내용</p>
</div>
</div>
</div>
...
...
'개발 > [웹프론트] 부트스트랩(bootstrap)' 카테고리의 다른 글
| [부트스트랩] datetimepicker, selectpicker 사이트 (0) | 2016.11.10 |
|---|---|
| 부트스트랩 navbar 가운데 로고 넣기 (0) | 2016.10.21 |
| 부트스트랩 가운데 정렬 (0) | 2016.10.13 |
| 부트 스트랩 공부하면서 정리한 것 (w3school) (1) | 2016.10.03 |
부트스트랩 가운데 정렬
개발을 하다 보면 가운데 정렬을 하기가 힘든 부분이 있다.
네이게이션 바, 이미지 등등 가운데 정렬하는 방법은 현재 가운데 정렬하고자 하는
부분의 부모에게 style 을 text-align: center 와 display: inline-block; 을 주면 된다.
쉽게 사용하기 위해 css에 만들어서 사용하는 방법도 있다.
http://fiddle.jshell.net/52VtD/94/
'개발 > [웹프론트] 부트스트랩(bootstrap)' 카테고리의 다른 글
| [부트스트랩] datetimepicker, selectpicker 사이트 (0) | 2016.11.10 |
|---|---|
| 부트스트랩 navbar 가운데 로고 넣기 (0) | 2016.10.21 |
| carousel의 carousel-inner 검정 배경 전체로 채우기 (0) | 2016.10.21 |
| 부트 스트랩 공부하면서 정리한 것 (w3school) (1) | 2016.10.03 |
부트 스트랩 공부하면서 정리한 것 (w3school)
부트 스트랩 3.0 이상
- 모바일 해상도 기준으로 만들어진다.
container , container-fluid
< 고정 폭 반응 형, 비 고정 폭 반응 형(full width 전체 다 사용함)>
Gird - 화면을 총 12등분 비율로 나누었다.
- 3.0 부터 클래스 명이 변경이 될 수 있기 때문에 잘 확인해서 사용해야 한다.
기본 예시)
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div>
Grid Options - 디바이스에 따라 설정되어있는 크기 값을 볼 수 있다.
- http://getbootstrap.com/css/
- (xs,sm,md,lg)
Stacked-to-horizontal - 사용 예시를 보여주고 있다.
Small Device - 예시를 보여주고 있고 25%, 75%로 나누고 싶다.
- <div class = "col-sm-3">... </div>
<div class = "col-sm-9">...</div>
Medium Device - 미디움은 992 pixels ~ 1100 pixels 까지
- <div class = "col-sm-3 col-md-6">... </div>
<div class = "col-sm-9 col-md-6">...</div>
- Small Device 에서는 sm -3 과 sm-9 화면이 적용되고
Medium Device는 md-6 md-6 화면이 적용된다.
jquery 라이브러리 먼저 사용 후 부트 스트랩 부른다.
Large Device - 33% 66% 쪼개는게 좋다.
- <div class = "col-sm-3 col-md-6 col-lg-4">... </div>
<div class = "col-sm-9 col-md-6 col-lg-8">...</div>
form = 별도의 크기 조절 없으면 크기가 100%로 사용된다.
Bootstrap Forms - http://www.w3schools.com/bootstrap/bootstrap_forms.asp
- form 관련 layout 3가지가 있다.
- Vertical form
- Horizontal form
- Inline form : 크기에 따라 form 컨트롤이 행으로 모두 주어지는 것
주의 : 적용 하기 위해서는 디바이스가 768보다 커야 적용이 된다.
div 로 감싸고 class= "form-group"으로 사용하여라
class = "form control" 를 추가해줘야 한다.
- Label 을 화면이 커질때 사라지게 할수있다. (label class 사용)
Bootstrap Input Form
- http://www.w3schools.com/bootstrap /bootstrap_forms_inputs.asp
- text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color 를 지원해준다.
- <fieldset disabled>를 사용하여 disabled할 수 있다.
- <span class= "glyphicon glyphicon-ok form-control-feedback"> 컨트롤 뒤에 아이콘 붙임
- input sizing (input의 height, width 사이즈 조절)
- http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
- input-lg,sm 높이를 조절 할 수 있다.
- Help Text 부가 적인 설명을 달 수 있다.
__________________________________________________________________________
2016.10.04
bootstrap 적용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>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">
<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>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Jumbotron - http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
- 강조하고자 하는 것을 표현할 때 사용.
- 박스가 그레이 색이고 폰트가 조금 커진다.
Button and Icon - 버튼을 만드는데 클래스가 두 개 사용된다.
- 버튼 사이트 : http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
- href 에도 버튼 적용 가능.
- 버튼 크기도 조절 가능하다. ( 클래스명을 변경하여)
- Jumbotron 안에도 버튼 적용 가능함
- 아이콘 사이트 : http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
- 버튼 안에 아이콘을 넣을 수 있다.
Multicolumn Layout - ?
Menu -http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
- 2가지 방법이 있다. (tabs, fills)
- tabs 에도 클래스 2개를 써줘야 한다.
- menu 안에 menu 는 Dropdown Menu를 사용
- span class -> 시각적으로 표현하기 위해 caret(사각형) 넣은 것 (dropdown)
- pills 는 모양새가 조금 달라진 메뉴! (색으로 블록 처리됨)
- 세로로 나열 할 수도 있다.
- pills에도 dropdown 반영할 수 있다.
Navigation Bars - http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
- 사이즈 별로 세로 가로 배열이 가능. (메뉴랑 비슷)
- nav 안에 container로 감싸서 사용
- navbar-inverce로 역을 줄 수 있다. ( 색이 반전, 디자인이 바뀜)
- Fixed를 이용하여 스크롤을 내려도 고정 할 수 있다.
- navigation bar도 drop down 가능!
- Right-Aligned 가능 navbar-right만 사용해서 오른쪽 정렬!
- 아이콘도 추가 가능!
- 접을수 있는 네비게이션 바도 있다. Collaping The Navigation Bar
간단히 id 와 button을 추가 해서 구현가능! 예시를 보아라. 버튼 toggle을 "collapse"추천 하여 사용.
_________________________________________________________________________
2016.10. 04
CSS Basic Text - 브라우저 마다 다르게 보여 줄 수 있으니 element 나 class를 추가 하여
관리해줌
- http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp
element
- h1(36px) ~ h6(12px)
- <small> : 조금 더 작고 연하게 나옴 h1~h6 안에 <small> 사용
- .small : 85% 작아진 텍스트
- .lead : text를 꾸며줄 때
- <mark> : 형광 팬 효과
- <del> : 삭제된 텍스트
- .text-left,right, center, justify, nowrap : 텍스트 정렬
- .text-lowercase, text-uppercase : 소문자, 대문자
- <abbr> : 약어 (마우스 올렸을 때 물음표가 뜬다. 그리고 설명이 나옴.)
- <ul>,<ol> : 리스트 만드는 것 (inline 추가 시 가로로 됨)
- <code>,<kbd> : 부트스트랩에서 재정의 함 (이쁘게)
CSS Button Classes - http://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp
- class 값에 따라 버튼 모양을 다르게 할 수 있다.
- .btn btn-default : 기본 모양
- 여러 btn 클래스 들이 있다.
- 버튼 크기 정의 가능 btn btn-lg, btn-sm, btn-xs
- active : 눌러진 버튼
- disable : 반응 안 하게 하기
CSS Forms - http://www.w3schools.com/bootstrap/bootstrap_ref_css_forms.asp
- 표준 기준 3가지
- <form role= "form"> 를 추가 해야함
- <div class="form-group"> 도 추가 해야한다.
- <input type="email" class="form-control" id="email"> 추가
- form 가로로 나열 하고 싶을 경우 form inline을 사용
- .form-horizontal : horizontal 으로 나열
CSS Helpers - http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
- 글자의 색, 배경 색 변경 가능
- link 가 될 경우 마우스를 댈 때 색이 짙어짐
- 콘텐츠 왼쪽, 오른쪽 배치, 클리어 해줄 것인가 (pull-left, pull-right, clearfix)
- .hidden : 브라우저에서 숨김 기능
- .sr-only, sr-only-focusable : 스크린 리더를 제외한 모든 디바이스에서 숨김 기능
- .close : x 아이콘 보여줄때
- .caret : dropdown 같은 메뉴, 숨겨진 메뉴 삼각형의 뒤집어진 모양
CSS Images - http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
- 이미지 모양 설정 가능 ( 모서리 둥글게 처리, 사진 둥글게, 사진 사각형 추가)
- .img-responsive : 이미지 반응형으로 처리 해준다. 부트스트랩 3.0 부터는 이것을 추가 해주지 않을 경우 반응형으로 처리 안 해줌.
CSS Table - http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp
- .table : 가로만 줄을 그려 표현
- .table-striped : 행마다 알록 달록 색을 넣어줌
- .table-bordered : 세로 줄을 그려 표현
- .table-hover : 마우스 위치에 진하게 표시
- .table-condensed : 간격을 좁혀준다.
-테이블의 컬러 표현할 때.
| .active | Applies the hover color to a particular row or cell | |
| .success | Indicates a successful or positive action | |
| .info | Indicates a neutral informative change or action | |
| .warning | Indicates a warning that might need attention | |
| .danger | Indicates a dangerous or potentially negative action |
- table-responsive : 768px 이하 에서 반응 형으로 크기가 변경된다.
- table 크기가 Over하게 되면 스크롤이 생겨 반응한다.
_________________________________________________________________________
컨포넌트만 모임
2016.10.04
Bootstrap Glyphicon Components
-http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
- 200가지 상용 문자 아이콘 사용 가능 < 추가 구입을 통하여 사용 가능하다.>
<470가지 추가 무료로 사용 가능 대신 Glyphicon.com을 적어줘야함 라이센스 홈페이지에서 확인!>
- 사용 예시
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
를 변경하여 아이콘 변경
Bootstrap Dropdowns
- http://www.w3schools.com/bootstrap/bootstrap_ref_comp_dropdowns.asp
- 버튼 또는 메뉴 클릭 시 구체적인 메뉴 보여줄 때
- disable 가능
Bootstrap Navs
- http://www.w3schools.com/bootstrap/bootstrap_ref_comp_navs.asp
- Tabs 와 Pills 관련 (메뉴)
- .nav nav-pills nav-stacked : 수직으로 쌓아가는 메뉴
- .nav-justified : 768보다 작으면 수직으로 쌓인다. 크면 수평으로
- dropdown 삽입가능
- breadcrumb : 현재 위치를 알려줄때 클래스명으로 사용
- .pager : 이전메뉴와 다음 메뉴 와 같이 간단한 링크 표현 할때
- .previous : 간단한 메뉴 링크 표현 할 때 왼쪽 끝과 오른쪽 끝으로 정렬됨.
- .next : 간단한 메뉴 옆으로 정렬.
- .pagination : ul 과 li 를 이용하여 1,2,3,4,5,6 숫자로 표현 가능
- Label 도 붙일수 있다. 기본 <.label label-default> 회색 배경의 흰 글로 작성
용도에 따라 Label 색 변경
| .label label-primary | Indicates a blue label of type "primary" | |
| .label label-success | Indicates a green label of type "success" | |
| .label label-info | Indicates a light blue label of type "info" | |
| .label label-warning | Indicates a yellow label of type "warning" | |
| .label label-danger | Indicates a red label of type "danger" |
- .badge : 작은 Label
- .jumbotron : 눈에 띄는 서비스 광고용(?) 회색 화면 크게 나옴
- .jumbotron(extra) : 이것은 기본 여백 없이 디바이스의 100%를 jumbotron으로 사용할 때
______________________________________________________________________
2016 .10 . 13
플러그 인
Collapse :http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
- 버튼을 누르면 숨겨진 부분을 보여 줄 수 있는기능 ( 접히고 피고 )
- in을 추가하게 되면 처음 브라우저 읽을때 그부분을 보여준다.
(collapse in)
- JavaScript로도 사용가능 ( ex $('.collapse').collapse() )
- Option에 toggle 과 parent 가 있다.
-Simple Example
<button type="button" class="btn btn-info" data-toggle="collapse"data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
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.
</div>
- Panel, List Group, Accordion ( 누르는 버튼 마다 글자 제어 ) 사용 가능
Carousel - 이미지 슬라이드 기능
'개발 > [웹프론트] 부트스트랩(bootstrap)' 카테고리의 다른 글
| [부트스트랩] datetimepicker, selectpicker 사이트 (0) | 2016.11.10 |
|---|---|
| 부트스트랩 navbar 가운데 로고 넣기 (0) | 2016.10.21 |
| carousel의 carousel-inner 검정 배경 전체로 채우기 (0) | 2016.10.21 |
| 부트스트랩 가운데 정렬 (0) | 2016.10.13 |
