Latest web development tutorials

부트 스트랩 프로필

부트 스트랩은 무엇입니까?

부트 스트랩은 웹 응용 프로그램 및 웹 사이트의 신속한 개발을위한 프런트 엔드 프레임 워크입니다. 부트 스트랩은 HTML, CSS, 자바 스크립트의 기반으로합니다.

역사

트위터의마크 오토야곱 손튼개발하여 부트 스트랩. 부트 스트랩은 GitHub의 오픈 소스 제품에 게시 2011년 8월입니다.

왜 부트 스트랩?

  • 모바일 첫째 : 이후 부트 스트랩 3 이후, 프레임 워크 스타일의 모바일 장치 우선 순위에 걸쳐 라이브러리가 포함되어 있습니다.
  • 브라우저 지원 : 모든 주요 브라우저가 부트 스트랩을 지원합니다.

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • 만큼 당신이 HTML과 CSS의 기본 지식을 가지고, 당신은 부트 스트랩을 배우고 시작할 수 있습니다: 사용하기 쉽습니다.
  • 반응 형 디자인 : 적응 데스크톱, 태블릿 및 휴대폰 할 수있는 응답 CSS 부트 스트랩.반응 형 디자인을 사용할 수에 대한 자세한 내용은 부트 스트랩 반응 형 디자인 .

    반응 형 디자인

  • 이 개발자는 간단한 인터페이스가 통합 된 솔루션을 제공 만들 수 있습니다.
  • 그것은 사용자 정의하기 쉽고 강력한 내장 된 구성 요소를 포함한다.
  • 또한 웹 기반의 사용자 정의를 제공합니다.
  • 그것은 오픈 소스입니다.

부트 스트랩 패키지 내용

  • 기본 구조는 : 부트 스트랩 그리드 시스템 링크 스타일 배경의 기본 구조를 제공한다.이는염기성 잔기 부트 스트랩 상세히 설명한다.
  • CSS : 다음과 같은 기능을 제공 부트 스트랩: 글로벌 CSS 설정, 기본 HTML 요소의 스타일, 확장 클래스 및 고급 그리드 시스템을 정의합니다. 이 섹션에서는 세부부트 스트랩 CSS에서 설명합니다.
  • 구성 요소 : 부트 스트랩 이미지를 만들기위한 다스 재사용 가능한 구성 요소를 포함, 드롭 다운 등 메뉴, 탐색, 경고 상자 팝업 상자 등을.이것은 상세구성 부품의 레이아웃을 설명한다.
  • 자바 스크립트 위젯 : 부트 스트랩은 다스 사용자 지정 jQuery 플러그인이 포함되어 있습니다.당신은 모든 플러그인을 포함 할 수있다, 이러한 플러그인은 개별적으로 포함 할 수 있습니다. 이는부트 스트랩 상세 플러그 부분에서설명한다.

  • 사용자 정의 : 당신은 부트 스트랩 구성 요소, LESS 변수를 사용자 정의 할 수와 jQuery를 플러그인을 자신의 버전을 얻을 수 있습니다.


온라인 예

부트 스트랩 튜토리얼 사이트는 예 수백이 포함되어 있습니다.

당신은 우리의 온라인 에디터 온라인 에디터 코드를 사용하고 결과를 볼 실행 버튼을 클릭 할 수 있습니다.

부트 스트랩 예

<사업부 클래스 = "컨테이너"> <사업부 클래스 = "대형 기기"> <H1> 나의 첫번째 부트 스트랩 페이지 </ H1> <P>는 반응 효과를 볼 수있는 창 크기를 재설정합니다! </ P> </ DIV> <사업부 클래스 = "행"> <사업부 클래스 = "COL-SM-4 "> <H3> 열 1 </ H3 > <P> 학습뿐만 아니라 기술뿐만 아니라 꿈입니다! </ P> <P> 다시 Niubi 꿈뿐만 아니라 방법을 제공하고 당신은 스틱 빨판처럼! </ P> </ DIV> <사업부 클래스 = "COL-SM-4 "> <H3> 열이 </ H3 > <P> 학습뿐만 아니라 기술뿐만 아니라 꿈입니다! </ P> <P> 다시 Niubi 꿈뿐만 아니라 방법을 제공하고 당신은 스틱 빨판처럼! </ P> </ DIV> <사업부 클래스 = "COL-SM-4 "> <H3> 3 열 </ H3 > <P> 학습뿐만 아니라 기술뿐만 아니라 꿈입니다! </ P> <P> 다시 Niubi 꿈뿐만 아니라 방법을 제공하고 당신은 스틱 빨판처럼! </ P> </ DIV> </ DIV> </ DIV>

»시도


더 많은 예제

예 2 부트 스트랩

<사업부 > 클래스 = "테이블 응답" <표 클래스 = "테이블 테이블 줄무늬 표 > -bordered" <THEAD> <TR> <목> # </ 일> <목> 이름 </ 일> <목> 스트리트 </ 일> </ TR> </ THEAD> <TBODY> <TR> <TD> 1 </ TD> <TD> 안나 최고 </ TD > <TD> 브룸 스트리트 </ TD > </ TR> <TR> <TD> 2 </ TD> <TD> 데비 달라스 </ TD > <TD> 휴스턴 스트리트 </ TD > </ TR> <TR> <TD> 3 </ TD> <TD> 홍길동 </ TD > <TD> 매디슨 스트리트 </ TD > </ TR> </ TBODY> </ 테이블> </ DIV>

»시도

어떻게 작동하는지 확인하기 위해 "시도"버튼을 클릭하십시오.