부트 스트랩 학습은 매우 간단하며 제공하는 스타일은 매우 아름답습니다. 약간 간단한 연구만으로도 아름다운 페이지를 만들 수 있습니다.
Bootstrap Chinese 웹 사이트 : http://v3.bootcss.com/
부트 스트랩은 세 가지 유형의 다운로드를 제공합니다.
생산 환경을위한 부트 스트랩
CSS, JavaScript 및 글꼴 파일을 컴파일 및 압축합니다. 문서 및 소스 파일을 포함하지 마십시오.
부트 스트랩 소스 코드
덜 JavaScript 및 글꼴 파일 소스 코드 및 문서가 있습니다. 적은 컴파일러와 일부 설정 작업이 필요합니다.
사스
이는 레일, 나침반 또는 SASS 전용 프로젝트에서 빠른 소개를 위해 소스 포팅 프로젝트입니다.
실제로 Bootstrap을 다운로드하지 않고 사용할 수 있습니다.
Bootstrap Chinese 웹 사이트는 부트 스트랩을위한 자체 무료 CDN 가속 서비스를 특별히 구축했습니다. 국내 클라우드 제조업체의 CDN 서비스를 기반으로 액세스 속도가 더 빠르며 가속 효과가 더 분명하며 속도와 대역폭 제한이 없으며 영구적으로 무료입니다.
base.html
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "width = device-width, mete-scale = 1"-위의 3 개의 태그 * 다른 컨텐츠 *를 따라야합니다! -> <title> bootstrap 101 템플릿 </title> <!-bootstrap-> <link rel = "stylesheet"href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css "> </head> <h1> hello, bootstrap! </h1> <!-jQuery (부트 스트랩의 JavaScript 플러그인에 필요)-> <script src = "http://cdn.bootcss.com/jquery/1.11.1.2/jquery.min.js"> </script> <!-모든 컴파일 된 플러그인 (아래) 포함 또는 개별 파일을 포함시킵니다. src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrap은 Base.html에 도입되었습니다. 저장하면 Bootstrap에서 제공하는 스타일을 사용할 수 있습니다.
글꼴 아이콘
부트 스트랩은 기본적으로 200 개 이상의 아이콘을 제공합니다. 스팬 태그를 통해이 아이콘을 사용할 수 있습니다.
<h3> 아이콘 </h3> <span> </span> <span> </span> <span> </span> </span> </span> <span> </span> <span> </span> <span> </span> </span> <span> </span> <span> </span>
단추
<버튼> </button> 태그는 버튼을 만드는 데 사용되며 부트 스트랩은 풍부한 버튼 스타일을 제공합니다. <H3> 버튼 </h3> <버튼 "> 버튼 </button> <버튼> <버튼 유형 ="버튼 "> 기본 </버튼> <버튼 유형 ="버튼 "> 성공 </button> <버튼"> info </button " 유형 = "버튼"> 버튼 </button> <버튼 유형 = "버튼"> 기본 </button> <버튼 유형 = "버튼"> 성공 </button> <버튼 유형 = "버튼"> info </button> <h3> 버튼에 아이콘이 표시됩니다 </h3> <버튼 유형 = "버튼"> <span> </span> 버튼 </button>
버튼의 기본 크기 외에도 Bootstrap은 버튼 크기, 즉 BTN-LG, BTN-SM 및 BTN-XS를 조정하기위한 세 가지 매개 변수를 제공합니다.
풀다운 메뉴
드롭 다운 메뉴는 가장 일반적인 상호 작용 중 하나이며 부트 스트랩은 아름다운 스타일을 제공합니다.
<h3> 드롭 다운 메뉴 </h3> <div> <버튼 유형 = "버튼"id = "dropdownmenu1"data-toggle = "dropdown"aria-expanded = "true"> dropdown <span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li roal = "presentation"> real = "tabindex =" href = "#"> action </a> </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 다른 액션 </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> </<li roble = "" "</<li>>> <li>>> <li>> <li> <li <li 역할 = "menuitem"tabindex = "-1"href = "#"> 분리 된 링크 </a> </li> </ul> </div>
입력 상자
<입력> </input> 태그를 사용하여 입력 상자를 만듭니다.
<h3> 입력 상자 </h3> <div> <span> </span> <입력 유형 = "text"placeholder = "username"> </div> <div> <div> </div> </div> </span> <입력 유형 = "placeholder ="plactor "> </div.
내비게이션 바
내비게이션 바는 전체 웹 사이트의 안내서로 필수적입니다.
<h3> Navigation Bar </h3> <av> <div id = "navbar"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#about"about "</a> </a> </li> <li> <a href ="#contact "> 접촉"> drown </li> <a href = "##"#"#"#"#"#" 역할 = "button"aria-expanded = "false"> dropdown> </span> </a> </a> <ul 역할 = "menu"> <li> <a href = "#"> action </a> </a> </li> <li> <a href = "#"> 다른 행동 </a> </li> <li> <li> nav Header </li> <a href = "#<a href. 링크 </a> </li> </li> </li> </ul> </ul> </div> <!-/. Nav-Collapse-> </div> </nav>
형태
사람과 시스템 간의 데이터 전송은 양식별로 완료해야합니다. 예를 들어, 등록/로그인 정보 제출, 쿼리 조건의 제출 등. <form> </form> 태그를 사용하여 양식을 만듭니다.
<h3> form </h3> <form> <div> <span> </span> <입력 유형 = "email"id = "exampleInputeMail1"placeHolder = "이메일 입력"> </div> <div> <span> </span = "placeth"id = "placeHolder ="placething </lame "> <dravefile" "exampleinputfile"in putile "> <입력 유형 = "파일"id = "exampleInputFile"> <p> 예제 블록 레벨 도움말 텍스트 예제.
경고함
경고 박스는 시스템이 정보를 전달하고 사용자에게 지침을 제공하는 중요한 수단입니다. 경고 상자에는 레이블이 없으며 Bootstrap에서 제공하는 스타일은 즉시 아름다운 경고 상자를 만들 수 있습니다.
<h3> 경고 박스 </h3> <div role = "Alert"> <버튼 유형 = "button"data-dismiss = "alert"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <strong> 경고! </strong> 자신이 너무 좋아 보이지 않습니다. </div> <div role = "alert"> <a href = "#"> 성공! </a> </div> <div robel = "alert"> <a href = "#"> info! </a> </a> </div 역할 = "alert"> <a href = "#"> 경고! </a> </a> </a> <div role = "a href ="#", </div>
진행률 바
시스템의 처리 프로세스는 종종 사용자가 대기해야하며 진행률 표시 줄을 사용하면 사용자가 시스템의 처리 프로세스를 인식하여 공차가 증가 할 수 있습니다.
<h3> 진행률 바 </h3> <div> <div robel = "ProgressBar"aria-valuenow = "70"aria-valuemin = "0"aria-valuemax = "100"> 70% </div> </div>
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼