Bootstrap 2.3.2 : 시작 가이드

Twitter Bootstrap 로고

부트 스트랩은 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 프레임 워크


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

코멘트를 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   알레 한 드라

    이 프레임 워크에 대한 더 많은 튜토리얼이 있습니까?