Bootstrap All Functions #1

Bootstrap All Functions #1

Container, Row, SpanX

<div class="container">

<div class="row">

<div class="span12">

<div class="span4 offset4"> <!-- 4 span offset >

<!-- row in the row available -->

<!-- responsive container and row -->

<div class="container-fluid">  

<div class="row-fluid">  

Responsive Web

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

<!-- responsive css declares its style respecitvely with @media tag -->

<!-- @media (min-width: 768px) and (max-width: 979px) -->

<!-- bootstrap css has following classes and works depending on the screen sizes.

.visible-phone

.visible-tablet

.visible-desktop

.hidden-phone

.hidden-tablet

.hidden-desktop,

-->

Typography

-

기본 tag 들에 대해서도 style 이 적용되어 있다.

-

blockquote 의 경우 위와 같이 두드러지게 바뀐다.

-

기본 tag 의 style 을 제거하려면 class="unstyled" 를 적용한다.

-

dl 의 경우 class="dl-horizontal" 로 수평 definition list 를 사용할 수 있다.

Glyphicon

<button type="button" class="btn btn-primary btn-lg">

  <span class="glyphicon glyphicon-user"></span> User

</button>

-

Glyphicon customize page

http://www.w3resource.com/twitter-bootstrap/3/glyph-customization.html

Table

<table class="table">

<table class="table table-striped"> 

Forms

<form class="well form-search"> <!-- well is grey back ground and margins -->

  <input type="text" class="input-medium search-query"> <!-- input-medium is input width -->

  <button type="submit" class="btn">Search</button>

</form>

-

bootstrap 의 기본 form 에 대한 layout 은 vertical.

vertical 이 아니게 하려면 inline 으로 설정해야 한다.

<form class="well form-inline">

-

bootstrap 에서는 아래 상태들에 대해서도 특성화된 style 을 제공한다.

readonly="true"

disabled

<div class="error"> <!-- red -->

<div class="warning"> <!-- orange -->

<div class="success"> <!-- green -->

Buttons

<button type="button" class="btn btn-default">Default</button>  

<button type="button" class="btn btn-primary">Primary</button>  

<button type="button" class="btn btn-success">Success</button>   

<button type="button" class="btn btn-info">Info</button>  

<button type="button" class="btn btn-warning">Warning</button>  

<button type="button" class="btn btn-danger">Danger</button>  

<button type="button" class="btn btn-link">Link</button>  

<button type="button" class="btn btn-default btn-sm">Default small button</button>  

<button type="button" class="btn btn-default btn-lg">Default large button</button>  

<button type="button" class="btn btn-default btn-xs">Default extra small button</button> 

<button type="button" class="btn btn-primary btn-sm btn-block">Default small block level button</button>  

<button type="button" class="btn btn-default btn-lg btn-block">Default large block level button</button>  

<button type="button" class="btn btn-primary btn-xs btn-block">Default extra block level button</button> 

<active>

<disabled>

<button type="button" class="btn btn-default active">Default</button>

<button type="button" class="btn btn-default" disabled="disabled">Default</button>

-

button tag 이외에도, a 와 input tag 로도 버튼을 만들 수 있다.

아래 3개는 똑같은 view 를 보여준다.

<a class="btn btn-default" href="#" role="button">Link</a>  

<button class="btn btn-default" type="submit">Button</button>  

<input class="btn btn-default" type="button" value="Input">  

-

button 도 마찬가지로 css 를 편집하여 customize 할 수 있다.

@media, Active, blockquote, bootstrap, Bootstrap All Functions, bootstrap-responsive.css, BTN, btn-block, btn-danger, btn-default, btn-info, btn-lg, btn-link, btn-primary, btn-sm, btn-success, btn-warning, btn-xs, Button, Buttons, CLASS, Container, container-fluid, content, css, customize, disabled, div, dl, dl-horizontal, error, form, form-inline, form-search, Forms, glyphicon, glyphicon-user, Green, hidden-desktop, hidden-phone, hidden-tablet, href, initial-scale, input-medium, Link, max-width, meta, min-width, Name, nested row, offset4, ORANGE, readonly, Red, responsive, Role, Row, row-fluid, search-query, span, span12, span2, span3, span9, SPANX, style, stylesheet, SUBMIT, Success, table, table-striped, TAG, type, typography, unstyled, Viewport, visible-desktop, visible-phone, visible-tablet, Warning, Well, width=device-width