본문 바로가기
프로그래밍 놀이터/Web

Bootstrap All Functions #1

by 돼지왕 왕돼지 2014. 3. 13.
반응형


 Bootstrap All Functions #1

 

Bootstrap All Functions.



Container, Row, SpanX


Bootstrap All Functions.


<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 이 적용되어 있다.



Bootstrap All Functions.

-

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



-

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



Bootstrap All Functions.

-

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




Glyphicon


Bootstrap All Functions


<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">



Bootstrap All Functions


<table class="table table-striped"> 




Forms


Bootstrap All Functions


<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



Bootstrap All Functions


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

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

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




Buttons


Bootstrap All Functions


<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>  



Bootstrap All Functions


<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> 






Bootstrap All Functions


<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> 




Bootstrap All Functions

<active>


Bootstrap All Functions

<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 할 수 있다.






반응형

댓글