오늘 우리는 CSS 구성 요소의 효과와 더 중요한 클래스를 살펴볼 것입니다. 이 수업은 어렵지 않습니다. 열쇠는 능숙하게 마스터하고 조합하여 사용하여 유연하게 사용하는 것입니다. 첫 두 기사의 CSS 스타일 및 레이아웃에 관한 기사는 이전 기사에서 읽을 수 있습니다.
1. 내비게이션 구성 요소
나는 직접 내비게이션을했다. 현재 1 단계 메뉴 만 있습니다. 다음 기사에서는 JS 플러그인이 포함 된 두 번째 레벨 메뉴가 제공되므로 여기서는 설명하지 않습니다.
<! 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> 두 번째 레벨 메뉴 </title> <tyle> .sidebar-menu {마진 : 20px 자동; 너비 : 180px;}/*마우스 슬라이딩 스타일을 다시 작성*/. Nav-Pills Li A : Hover {배경색 : #337ab7; 색상 : #fff;} </style> <link href = "css/bootstrap.css"rel = "stylesheet"> <link href = "css/bootstrap.min.css"rel = "Stylesheet"> <링크 href = "css/style.css"rel = "script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootsprap/3.3.4/js/jstrap.min.js"> </script> <! 메뉴-> <div> <ul> <li 역할 = "프레젠테이션"> <a href = "#"> <span> </span> home </a> <li role = "presentation"> <a href = "#"> <span> </span> 나에 대해 </a> </li> <li 역할 = "persial"> <</li </li> </li> </li> </li> 역할 = "프레젠테이션"> <a href = "#"> <span> </span> 누락 </a> </li> <li robol = "presentation"> <a href = "#"> <span> </span> 메시지 보드 </a> <li 역할 = "프리젠 테이션"> <a href = "#"> </span> 감정적 단어 </ li>>>>>>>>>>>> </li>> </ul> </div> </body> </html>효과는 다음과 같습니다.
내비게이션에는 다음 사항이 표시되어야합니다.
1 : 내비게이션 구성 요소는 NAV 클래스에 따라 다릅니다. (즉, 다른 수업을 사용할 때는이 수업을 작성해야합니다)
2 : 내비게이션 구성 요소의 접근성 보장 (역할 속성 추가)
3 : 관련된 클래스에는 Nav-Tabs, Nav-Pills (Navigation Capsules Make), Nav-Staced (수평 내비게이션 Make invertical Navigation), Nav-Justified (내비게이션 동일한 폭 배열)가 포함됩니다.
4 : 장애가있는 클래스의 경우 탐색 페이지 (탭 및 탐색 페이지 포함)에 링크를 추가 할 때 표면에서 비활성화되어 있습니다 (색상이 회색으로 연결되고 마우스 모양이 변경됨)이 여전히 존재합니다.
5 : 드롭 다운 메뉴와 함께 탐색을 사용하십시오.
다음 서브를 살펴 보겠습니다. 코드를 붙여 넣고 직접 테스트하고 더 이상 스크린 샷을 찍지 않을 수 있습니다.
<!-Navigation은 NAV 클래스 NAV-TABS 클래스 클래스 클래스-> <ul> <li 역할 = "프리젠 테이션"> <a href = "#"> home </a> </a> </li> --- robile 속성 <li 역할 = "프리젠 테이션"> <a href = "#"> 프로파일 </a> <li 역할 = "Presentation"> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#. </ul> <!-캡슐 탭은 Nav-Stacked를 수직으로 정리합니다-> <ul> <li 역할 = "프리젠 테이션"> <a href = "#"> home </a> </li> <li 역할 = "프리젠 테이션"> <a href = "#"> 프로파일 </a> </li> <li 역할 = "프리젠 테이션"> 프로파일 </a> "> 프로파일 </a> </a>"> 역할 = "프리젠 테이션"> <a href = "#"> 메시지 </a> </a> </li> </ul> <!-내비게이션 열 정렬을 달성하기 위해 양쪽 끝에서 내비게이션을 정렬합니다-> <ul> <li 역할 = "프리젠 테이션"> <a href = "#"> home </a> </li> <li 역할 = "</li </sprofect". 역할 = "프리젠 테이션"> <a href = "#"> 메시지 </a> </li> </ul> <br> <br>
드롭 다운 메뉴와 함께 내비게이션 상태를 살펴 보겠습니다.
<ul> <li 역할 = "프레젠테이션"> <a data-toggle = "dropdown"href = "#"role = "button"aria-haspopup = "true"aria-expanded = "false"> dropdown </span> </a> <ul> <li> <a href = "#"> action </a> <li> <a action 111 <a action 111 <#a href = a href =. <li> <a href = "#"> Action 222 </a> </li> <li> <a href = "#"> Action 333 </a> </li> </li> </li> <li> <a href = "#"> Action 333 </a> </li> </li> <li> <a href = "> </li> href ="> 일반적으로 빈 Li 또는 스팬을 사용하는 디바이더. <li 역할 = "프레젠테이션"> <a href = "#"> 프로파일 </a> </li> <li 역할 = "프레젠테이션"> <a href = "#"> 메시지 </a> </li> </ul>
실제로 드롭 다운 메뉴 클래스 드롭 다운을 사용하기 위해 기본 형식은 위와 같거나 링크 A를 버튼 등으로 전환하면 유연하게 사용할 수 있습니다.
2. 내비게이션 바 구성 요소
메모:
1 : 내비게이션 막대는 모든 구성 요소를 가로로 정렬하고 수평 내비게이션과 유사한 구성 요소를 감싸는 것입니다.
2 : 접근성을 보장하십시오. <av> 태그 또는 <div 역할 = "Navigation">을 사용하십시오
3 : 내비게이션 막대와 관련된 클래스는 다음과 같습니다. Navbar Inverse (배경색을 검은 색 및 텍스트 흰색으로 구현하기 위해), Navbar-Fixed-Top | Navbar-Fixed-Bottom (상단 및 하단의 고정 내비게이션 바)
Navbar-left | navbar-right (일반적으로 마지막 요소에 Navbar Right를 추가), Navbar-Text, Navbar-Link (연결 색상 설정), Navbar-BTN (양식 양식에 포함되지 않은 버튼의 경우,
이 클래스를 사용하여 수직 센터링의 효과를 달성), Navbar-Form (수직 정렬을 달성하기 위해), Navber-Brand (세트 브랜드 아이콘), Navbar-Collapse (Collapse)
Navbar-Collapse Folding의 효과를 살펴 보겠습니다. 코드는 다음과 같습니다.
<!-내비게이션 바가 접은 접이식-> <avi> <div> <div>-나오는 바 헤드러 <버튼 타입 = "버튼"데이터-토글 = "콜랩스"데이터-타겟 = "#bs-example-navbar-collapse-1"aria-expanded = "false"> <span> 토글 내비게이션 </span> </span> </span> </span> </span> </span> </span> <span> </span> </button> <a href = "#"> 브랜드 </a> </div> <div id = "bs-example-navbar-collapse-1">-폴드 컬럼 <ul> <li> <a href = "#"> link <span> current> </span> </a> <li> <a href = "#"> link </a "> href = "#"data-toggle = "dropdown"lole = "button"aria-haspopup = "true"aria-expanded = "false"> dropdown </span> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> <li> <<a li>> <a href 여기 </a> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> <li 역할 = "분리기"> </li> <li> <a href = "#"> 한 번 더 분리 된 링크 </a> </li> </li> </li> </li> </ul> <양식 "> <input type ="텍스트 "텍스트"텍스트 "place honholder. 유형 = "제출"> 제출 </button> </form> <ul> <li> <a href = "#"> link </a> </a> </li> <li> <a href = "#"data-toggle = "dropdown"role = "button"aria-haspopup = "true"aria-expanded = "false"> dropdown </span> <ul> <ul> <li> <ul> <ul> href = "#"> action </a> </a> </li> <li> <a href = "#"> 또 다른 행동 </a> </li> <li> <a href = "#"> 여기에 다른 것 </a> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> </li> </div> </divbrse </li> <! <button type = "button"data-toggle = "collapse"data-target = "#bs-example-navbar-collapse-1"aria-expanded = "false"> <span> navigation </span> <span> </span> <span> </span> <span> </span> <span> </button> <a href = "#"#"#">
효과는 다음과 같습니다.
즉, 브라우저 화면이 줄어들면 원래 구성 요소가 브랜드 라인의 오른쪽에 접힌 선 (3 개의 수평선)이됩니다. 세 가지 수평 버튼을 클릭하면 구성 요소가 표시됩니다.
3. Pagination 구성 요소
메모:
1 : 클래스 페이지 매김 사용 (Pagination-LG 클래스 추가를 위해 더 크게 만들어)
2 : 페이지 턴 정렬 및 구현 페이지 턴 정렬 (앞면과 후면은 각각 양쪽 끝에 있습니다).
코드는 다음과 같습니다.
<!-Pagination Category-> <avi> <ul> <li> <a href = "#"aria-label = "previous"> <span aria-hidden = "true">«</span> </a> </a> <li> <a href = "#"> 1 </a> </li> <li> <a href = "#"</li>>>>>>>>>>>>>>>>> </li> href = "#"> 3 </a> </a> </li> <li> <a href = "#"> 4 </a> </a> </a> </li> <li> <a href = "#"> 5 </a> </a> </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <aria-label = "aria-label ="<<<<aia-label " aria-hidden = "true">»»</span> </a> </li> </ul> </nav>
페이징을 구현하면 <ul> 만 추가하십시오.
페이지 회전 효과는 다음과 같습니다. 주로 호출기 클래스를 사용합니다.
<!-flip-up-> <av> <ul> <li> <a href = "#"> previous </a> </a> </a> </a> </a> </a> </a> </a> </a> </li> <li> a href = "#"> next </a> </a> </li> </ul> </nav> <!-정렬 링크가 양쪽 끝에서 이전 및 다음 클래스를 추가했습니다. aria-hidden = "true"> ← </span> olory </a> </li> <li> <a href = "#"> newer <span aria-hidden = "true"> </span> </a> </li> </ul> </nav>
위의 두 가지 효과는 다음과 같습니다.
4. 배지
기능 : 정보를 시선을 사로 잡는 숫자로 제시하십시오.
<!-배지-> <a href = "#"> inbox <span> 42 </span> </a> <button type = "button"> message <span> 4 </span> </button>
효과는 다음과 같습니다.
이 유형의 배지 클래스 추가는 내비게이션 등과 함께 사용할 수도 있습니다.
5. 썸네일 구성 요소
래스터 시스템 및 썸네일 클래스와 함께 사용하십시오. 코드는 다음과 같습니다. 직접 테스트 할 수 있습니다.
<!-썸네일 썸네일-> <div> <div> <div> <img src = "111.png"> <div> <h3> Thumbnail 레이블 </h3> <p> <a href = "#"role = "button"> button </a> <div> <div> <div> <div> <div> <div> <div> src = "111.png"> <div> <h3> 썸네일 레이블 </h3> <p> <a href = "#"robel = "button"> button </a> </p> </div> </div> <!-세 번째-> <div> <div> <div> <h3> thumnail label </h3> <am <h3> href = "#"role = "button"> 버튼 </a> </a> </a> </p> </div> </div> <!-세 번째-> <div> <div> <Img src = "111.png"> <div> <h3> 썸네일 레이블 </h3> <p> <p> <a href = "#"robile = "button" </div> </div> </div> </div> </div> </div>
6. 닫을 수있는 경고함
클래스 사용 : Alert-dismissible 및 버튼은 다음과 같이 게시됩니다.
<!-경고 상자에 대한 닫기 버튼을 제공합니다-> <div role = "alert"> <button type = "button"data-dismiss = "alert"aria-label = "close"> <span aria-hidden = "true"> </span>-Aria-hidden attribute </button> <strong> 경고 </strong> 더 나은 점검이 너무 좋아 보이지 않습니다. 모든 장치에서의 동작 ->
장면과 관련하여 직접 교체 할 수 있습니다. 더 이상 설명이 없습니다. 경고 링크를 설정하여 현재 경고 상자와 일치하는 색상을 설정하십시오.
7. 진행률 바
클래스 : 진행 및 진행률 표시 줄을 사용하여 애니메이션을 구현하십시오
<!-Progress Bar-> <div> <div role = "ProgressBar"Aria-Valuenow = "60"Aria-Valuemax = "100"Aria-Valuemin = "0"> 60% </div> </div> <!-최소 너비-> <div> <div arebar "aria-valuenow = 80"Aria-valuemin = "" "" "". aria-valuemax = "100"> 80% </div> </div> </div> <div> <div robol = "progressbar"aria-valuenow = "2"aria-valuemin = "0"aria-valuemax = "100"style = "min-width : 2em;"> 2% </div>
애니메이션 효과의 진행률 표시 줄을 달성하려면 Progress-Bar Striped를 사용하여 애니메이션 효과를 달성하고 활성화하십시오. 코드는 다음과 같습니다. 더 이상 스크린 샷이 없습니다
<!-Stripe 클래스에서 진행중기를 사용하는 사용-> <div> <div roble = "ProgressBar"Aria-Valuenow = "100"Aria-Valuemin = "0"aria-valuemax = "100"> <스팬> 40% 완료 </span 100% </div.
또한 Progress Bar Stripes의 색상을 장면 색상과 함께 변경할 수도 있습니다.
8. 목록 그룹, 입력 그룹 구성 요소
먼저 List Group을 사용하여 목록 그룹 클래스를 사용하고 두 번째로 목록 항목은 List-Group-Item으로 작성됩니다. 코드는 다음과 같습니다.
<!-List Group-> <ul> <li> <li> <span> 3 </span> 1111 </li> <li> <li> <span> 5 </li> <li> 3333 </li> <li> 4444 </li> <li> 5555 </li> </ul> <!-링크도 목록으로 시나리오 클래스를 추가 할 수 있습니다-> <div> <a. href = "#"> 2222 </a> <a href = "#"> 33333 </a> <a href = "#"> 44444 </a> <a href = "#"> 55555 </a> </div> <!-목록 그룹으로서 버튼, div, <1111 <버튼 "> 버튼"> bulling "> 타입 = "버튼"> 2222 </button> <버튼 유형 = "버튼"> 3333 </button> <버튼 유형 = "버튼"> 4444 </button> <!-목록 그룹 항목-> <div> <a href = "#"> <h4> 목록 그룹 항목 </h4> <p> 11111 </a> <a href = "<h4>> href ="<h4>> <p> 22222 </p> </a> </div
입력 그룹을 살펴보고 입력 그룹 클래스를 사용하여 구성 요소를 함께 랩핑하겠습니다. 코드는 다음과 같습니다.
<!-입력 그룹-> <div>-구성 요소는 inout-group <span> <button type = "button"> go </button> </span> <입력 유형 = "text"aria-label = "text"> </div>에 포함됩니다.
9. 반응 형 기능의 내용을 포함시킵니다
그것이 무엇을 의미하는지 이해하고 내장 된 내용이 무엇인지 이해합니까? 그것을 포함시키는 방법? 그래서 어떻게 응답합니까?
embed : 즉, <iframe>, <embed>, <video> 및 <bood>와 같은 태그를 사용하여 외부 파일 내용을 소개합니다. 모든 사람이 HTML5의 새로운 속성을 알고 있다고 생각합니다. 비디오, 라디오 등
응답 : 내장 된 외부 컨테이너의 너비에 따라 고정 스케일을 자동으로 생성하므로 브라우저는 비디오 또는 컨텐츠의 크기를 자동으로 결정하고 다양한 장치에서 스케일링 할 수 있습니다.
최종 스타일이 다른 속성과 일치하도록하려면 파생 된 .embed-responsive-item 클래스를 명시 적으로 사용할 수도 있습니다.
코드는 다음과 같습니다.
<div> <iframe src = "..."> </iframe> </div> <div> <iframe src = "..."> </iframe> </div>
embed-responsive-16by9 및 embed-responsive-4by3의 의미를 각각 살펴 보겠습니다.
콘솔을 살펴 보겠습니다.
.Embed-responsive-4by3 {--- 4는 수평을 나타내고, 3은 수직, 즉 스케일링 비율, 즉 4 : 3 패딩 바닥 : 75%;}를 나타냅니다.세상 비율을 유지하십시오. 너비가 100%로 계산되면 100% * 3/4 = 75%입니다. 현재 패딩-바토 톰을 설정하여 종횡비를 설정하십시오. 브라우저를 확대하면
마지막으로 스케일링을 위해이 스케일링 비율을 유지하십시오.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.