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

Bootstrap All Functions #2

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


 Bootstrap All Functions #2

 

Bootstrap All Functions #2


HTML 5 Doctype


<!DOCTYPE html>

<html lang="en">

..

</html>




Mobile First


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


BootStrap 3 부터는 기본적으로 responsive web page 이다. Bootstrap 3 부터는 모바일 단말들이 먼저이고, 데스크탑을 다음 순위로 지원한다.


추가적으로 user-scalable=no 를 넣을수도 있다. 이 녀석은 모바일 단말에서 zoom 을 막는 효과가 있다.

maximum-scale=1.0 은 user-scable=no 와 함께 쓰여서 native app 과 비슷한 효과를 볼 수는 있으나, responsiveness 는 떨어진다고 볼 수 있다.




Responsive Images


.img-responsive{

   display: inline-block;

   height: auto;

   max-width: 100%;

}




Global display, Typography and links.


body{

   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

   font-size: 14px;

   line-height: 1.428571429;

   color: #333333;

   background-color: #ffffff;

}



a:hover,

a:focus{

   color: #2a6496;

   text-decoration: underline;

}


a:focus{

   outline: thin dotted #333;

   outline: 5px auto -webkit-focus-ring-color;

   outline-offset: -2px

}







Get rid of cross browser inconsistencies


cross browser inconsistency 제거를 위해 normalize 기법이 쓰였다. ( 이전버전도 지원 )


.container{

   margin-right: auto;

   margin-left: auto;

}



.container:before,

.container:after{

   display: table;

   content: " "; // opera bug fix

}






반응형

댓글