부트 스트랩은 CSS 프레임 워크 네트워크 전체에서 매우 인기가 있습니다. 그들의 스타일 반응 소셜 네트워크에서 볼 수 있습니다. Tuenti y 트위터. 이를 사용하면 모든 장치에 적합한 깨끗한 페이지 스타일을 만드는 데 필요한 모든 작업과 노력을 절약 할 수 있으므로 웹 응용 프로그램을 개발할 때 많은 시간을 절약 할 수 있습니다. 이 프레임 워크에 사용 된 스타일을 살펴보면 오늘날 많은 웹 사이트에서이를 구현했기 때문에 익숙하다는 것을 알게 될 것입니다.
구조
부트 스트랩 유체 구조
모바일 및 태블릿에서 웹 사이트에 액세스하려면 Bootstrap이 제공하는 유동적 인 구조를 사용해야합니다. 이 구조의 사용은 매우 간단하며 모든 것이 요소를 기반으로합니다. 기간 그것은 우리를 도울 것입니다 형세 우리의 웹 디자인. 나중에이 디자인에 액세스 할 때 스마트 폰 o 태블릿, 이것은 네비게이션의 품질을 상당히 향상시키는 상기 장치에 자동으로 적응할 것입니다. 우리는 기간 유체 구조 내에서 논리적 분할에있는 클래스, 즉. :
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
여기서 숫자 2는 범위의 크기를 나타냅니다. 각 행에는 크기 12의 1 개 범위 또는 크기 2의 6 개를위한 충분한 공간이 있습니다. 원하는대로 배포 할 수 있습니다. 행의 공간이 초과되면 자동으로 다음 행으로 내려 가서 기간 줄 바꿈을 만들려면 크기 12입니다. 우리가 일부를 건너 뛰고 싶다면 기간 하나를 만들 때 즉, 4부터 시작합니다. 기간, 크기 3을 적용하면 다음 코드를 사용합니다.
<div class="span2 offset4">Contenido</div>
이렇게하면 디비전이 XNUMX 개를 점프 할 수 있습니다. 스팬 콘텐츠를 표시하기 전에. 우리는 코드로 원하는 것을 건너 뛰고 자유 의지로 이것을 사용할 수 있습니다.
오프셋 클래스로 스팬 건너 뛰기
장치마다 다른 디자인
각 장치를 구별하는 CSS 클래스
각 장치 유형에 대해 다른 디자인을 적용하기 위해 다음 클래스를 사용하여 방향이 지정된 장치에 대한 각 논리적 구분을 알려줍니다.
이런 식으로 동일한 URL을 가진 각 장치에 대해 완전히 다른 디자인을 표시 할 수 있습니다.
버튼
Bootstrap에서 제공하는 버튼 목록
Bootstrap은 색상 버튼의 깨끗한 레퍼토리를 제공하며 사용법은 매우 간단합니다.
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
어디에 btn btn-success 버튼의 색상을 나타 내기 때문에 변경하려면 이전 이미지에 표시된 클래스로만 교체하면됩니다.
부트 스트랩 설치
이 CSS 프레임 워크의 설치를 위해 게시물 끝에 남겨 둘 링크에서 zip을 다운로드하고 다음 코드를 작성합니다. HTML 파일의 헤드에.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
CSS 및 JS 파일이 HTML 파일과 동일한 폴더에 있는지 확인한 후 반응 형 웹 사이트 디자인을 시작할 수 있습니다.
추가 정보 - 양식 유효성 검사
다운로드- 부트 스트랩 : CSS 프레임 워크
이 프레임 워크에 대한 더 많은 튜토리얼이 있습니까?