개발자를위한 부트 스트랩의 가장 큰 장점은 반응 형 레이아웃과 훌륭한 스타일입니다.
이제 나는 몇 가지 단계와 부트 스트랩을 사용하기 위해 일반적으로 사용되는 것들을 소개 할 것입니다.
1. 헤더를 쓰십시오
<head> <meta charset = "utf-8"> <! ~ 즉, 최신 렌더링 모드를 사용하기 위해이 태그를 추가하기 위해이 태그를 추가합니다-> <meta http-equiv = "x-ua-catible"content = "ie get"> <!-반응 형 레이아웃을 위해 장치의 물리적 폭을 얻으려면 장치의 물리적 폭을 획득합니다. 이름 = "viewport"content = "width = device-width, feation-scale = 1"> <title> Learnbootstrap </title> <!-파일을 직접 참조하십시오-> <link rel = "stylesheet"type = "text/css"href = "css/bootsprap.min.css">-참조 cdn 주소-> in link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-IE9 이하를 지원하기 위해 IE9 이하를 추가하려면 다음을 추가하십시오-> <!-[LT IE 9]> <!-H5 태그를 지원하자-> <Script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-미디어 쿼리, 즉 반응-> <Script를 지원하도록하십시오. src = "https://oss.maxcdn.com/respent/1.4.2/respent.min.js"> </script> <!-[endif]-> </head>
2. JS를 소개합니다
이것은 몸에 쓸 수 있습니다
<!- jQuery 파일. 소개-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><! src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
3. 컨테이너 클래스를 사용하십시오
컨테이너 클래스는 일반적으로 사용되는 DIV 클래스입니다
주로 센터링 기능을 사용하십시오
<div> 안녕하세요 </div>
4. 래스터 화 된 시스템을 사용하십시오
Rasterized System은 부트 스트랩에 매우 일반적으로 사용되는 레이아웃 시스템입니다.
다음과 같이 간단한 사용
<div> <!-xs는 전화의 의미, 태블릿의 SM을 의미하며, MD는 데스크탑에서 의미합니다. 다음 숫자는 몇 개의 열이 점유 된 수를 나타냅니다. 전체 화면은 12 개의 열-> <!-내용이 그리드의 높이를 초과하고 높이가 증가하지 않으며 폭이 증가하지 않습니다.> <!-오프셋은 오른쪽으로 얼마나 많은 열이 이동 될 것인지를 의미합니다-> <col-xs-12 .col-sm-6 .col-md-8.col-md-12 .col-sm-6 .col-md-x-x-x-x-col-m-m-m-m-m-m-m-m-m-m-m- x-6. .col-sm-6 .col-md-4 </div> </div> <div> <!-푸시 푸시가 뒤로 움직입니다.
래스터 화 시스템은 다른 장치에 따라 다른 폭을 조정할 수 있음을 알 수 있습니다.
5. 양식을 사용하십시오
<div> <!-반응 형 테이블, 컨텐츠가 왼쪽과 오른쪽으로 이동하기에는 너무 길다-> <div> <!-마지막 몇 테이블은 테이블이있는 테이블입니다. 마우스가 tbody 행을 통과하면 색상이 어둡고 테이블이 압축됩니다-> <table> <thead> <tr> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </tr> </thead> <tbody> <!-라이트 컨텐츠 </th> <t> <t> <t> <t> <t> <t> <t> 컨텐츠 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 컨텐츠 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> 테이블 </th> 테이블 </th> <!-행의 색상은 베이지-> <tt> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <Table content </th> <Th> <Table Content <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 컨텐츠 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> <th> 테이블 내용 </th> </tr> </tbody> </div>
특정 그리드의 색상을 변경하려면 TH 태그에서 TR과 같은 클래스를 추가 할 수 있습니다.
6. 양식을 사용하십시오
가장 기본적인 사용법은 다음과 같습니다
<div> <form> <!-항목의 일부는 LABEL 및 입력-> <DIV> <!-입력 ID에 해당하는 레이블-> <label for = "examesInputeMail1"> 이메일 주소 </label> <!-입력 클래스를 양식 -Control-> <input type = "email </</</</</</</</</</</</<id ="explace로 설정해야합니다. for = "exampleInputpassword1"> password </label> <입력 유형 = "password"id = "exampleinppassword1"placeholder = "plactome"> </div> <div> <label for = "exampleInputFile"> 파일 입력> <입력 유형 = "id ="exampleInputFile "> <!-help text-> <p> 여기에 <p> <p> <입력 유형 = "체크 박스"> 체크 아웃 </label> </div> <버튼 유형 = "제출"> 제출 </button> </form> </div>
양식 클래스를 형태 인라인으로 설정하면 모든 요소가 같은 줄에 표시됩니다.
양식 클래스를 양식으로 설정하면 각 양식 그룹은 한 줄을 표시하지만 너비를 직접 설정해야합니다.
좋다
<div> <!-각 양식 그룹이 한 줄을 표시하도록하자, 각 양식 그룹 자식은 너비를 지정해야하지만, "emai"> email </label> <!-입력 그룹 Let Prompts와 보충제가 같은 줄에 표시됩니다-> <div> <div> <div> <emai "> </div> </div> </div> </div> <emai"> for = "passwor"> password </label> <div> <입력 유형 = "plactice"plactholder = "plactome"id = "passwor"> </div> </div> <button type = "제출"> Summit </button> </form> </div>
일반적으로 계정을 등록하면 정보가 잘못되거나 정확한 경우 옆에 프롬프트가 발생하고 입력 상자의 색상이 다릅니다.
부트 스트랩은이 매우 실용적인 기능을 제공합니다
<div> <form> <!-부모 div 클래스에 추가되어야합니다-> <!-성공 상태-> <div> <label for = "inputsuccess2"> 성공한 입력 </label </label = "text"id = "inputsuccess2"aria-descrecedby = "inputsuccess2status"> <! <! <! <! aria-hidden = "true"> </span> <!-이 정보는 숨겨져 있으며 코드의 가독성이 숨겨져 있습니다-> <span id = "inputSuccess2status"> (성공) </span) </span> </div> <!-경고 상태-> <div> <label with with </<div> <inputwarning2 "> 입력 </<div> <inputwarning2"> input = "텍스트"id id "in in inputwend2". aria-describedby = "inputwarning2status"> <span aria-hidden = "true"> </span> <span id = "inputwarning2status"> (경고) </span) </span) </div> <!-오류 상태-> <div> < "inputerror2"> error </label <inputer2 "> input ="텍스트 "ind"ind "inputertor2" aria-describedby = "inputerror2status"> <span aria-hidden = "true"> </span> <span id = "inputerRor2status"> (error) </span> </div> </form> </div>
7. 버튼
버튼은 필수적입니다
<!-흰색 배경-> <버튼 유형 = "button"> (기본 스타일) 기본값 </button> <!-파란색 배경-> <버튼 유형 = "버튼"> (기본 설정) 1 차 </butt 경고 </button> <!-빨간색 배경-> <버튼 유형 = "버튼"> (위험) 위험 </button>
클래스에 치수를 추가 할 수도 있습니다
<버튼 유형 = "버튼"> (큰 버튼) 큰 버튼 </button> <버튼 유형 = "버튼"> (기본 크기) 기본 버튼 </button> <버튼 유형 = "버튼"> (작은 버튼) 작은 버튼 </button> <버튼 유형 = "버튼"> (작은 버튼) 추가 작은 버튼 </button>
위는 부트 스트랩의 단계와 일반적인 사용입니다.
이 프레임 워크를 사용한 후에는 개발 속도가 증가했을뿐만 아니라 품질도 향상되었습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.