부트 스트랩 프로필
부트 스트랩은 무엇입니까?
부트 스트랩은 웹 응용 프로그램 및 웹 사이트의 신속한 개발을위한 프런트 엔드 프레임 워크입니다. 부트 스트랩은 HTML, CSS, 자바 스크립트의 기반으로합니다.
역사
트위터의마크 오토야곱 손튼개발하여 부트 스트랩. 부트 스트랩은 GitHub의 오픈 소스 제품에 게시 2011년 8월입니다.
왜 부트 스트랩?
- 모바일 첫째 : 이후 부트 스트랩 3 이후, 프레임 워크 스타일의 모바일 장치 우선 순위에 걸쳐 라이브러리가 포함되어 있습니다.
- 브라우저 지원 : 모든 주요 브라우저가 부트 스트랩을 지원합니다.
- 만큼 당신이 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>
»시도
어떻게 작동하는지 확인하기 위해 "시도"버튼을 클릭하십시오.