이전 기사는 이미 부트 스트랩의 일부 단계와 몇 가지 기본 사용에 대해 이야기했습니다. 보려면 클릭하십시오
이 블로그는 주로 다음 구성 요소를 포함하여 몇 가지 일반적인 효과를 계속 소개합니다.
1. 메뉴를 당기십시오
2. 내비게이션 바
3. 진행률 바
4. 미디어 객체
5. Pagination
6. 목록
먼저 부트 스트랩의 CSS 및 JS를 가져 오십시오
<link rel = "stylesheet"href = "css/bootstrap.min.css"> <!-cdn의 css를 인용하는 것이 가장 좋습니다. 일부 스타일 파일은-> <link rel = "Stylesheet"href = "// cdn.bootcss.com/bootstrap/3.5/css/bootstrap.min.css으로. src = "js/jquery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. 메뉴를 당기십시오
주로 버튼과 UL로 구성되며 자막과 분할 라인을 추가 할 수 있습니다.
<div> <버튼 유형 = "button"data-toggle = "dropdown"aria-expanded = "false"> 지하철 줄 <!-이것은 하향 삼각형 기호-> <pan> </span> </button> <ul 역할 = "메뉴"> <!-이것은 하위 <li> <li> <a href = "</> <a>"> ">"> "> </> <li> <<li> <li> href = "#"> line 2 </a> </li> <li> <a href = "#"> 라인 3 </a> </li> <li> <a href = "#"> line 4 </a> </li> <!-이것은 분할 라인입니다-> <li> </li> <li> <a href = "#"> </li>> </li> </li> </li> </li> </li> </li> <li>
2. 내비게이션 바
탐색 표시 줄은 거의 모든 웹 페이지의 표준이므로 사용 방법을 배우는 것이 옳습니다.
이것은 페이지 상단의 탐색 표시 줄입니다.
<!-Nav 클래스를 더 높은 엔드로 설정하고, Navbar Static-Top으로 설정하여 Navbar의 둥근 모서리를 제거하고 상단에서 고정시키고-> <nav role = "navigation"> <div> <!-네비게이션 막대의 시작, 일반적으로 텍스트 또는 그림-> <div> <!-이 단추가 위치가 충분하지 않을 때-> <Datoggle = ""Data-toggle = ""Datoggle = ""Datoggle "" "Div> <! Data-target = "#bs-example-navbar-collapse-1"> <span> 토글 내비게이션 </span> <span> </span> <span> </span> <span> </span> </span> </button> <!-img-> <a href = "#"> brand </div> <!-id to-1에 설정하십시오. 철회 및 클릭으로-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <#"> 회원 관리 </a> </li> <li> <a href ="#"> 멤버 관리 </a> </li> <li> <a href ="#"> <<a <a <a <a <a <a em </li> </li> 관리 </a> </li> <li> <a href = "#"> 회원 관리 </a> </li> <li> <#"> 회원 관리 </a> </li> <li> <a href ="#"> 회원 관리 </a> </li> <li> <a href ="#"> </li> </li> </li> </li </li </li </li </li </li </li </li </li. <a href = "#"data-toggle = "dropdown"lole = "button"aria-expanded = "false"> 시스템 유지 보수 <span> </span> </a> <ul 역할 = "menu"> <li> <a href = "#"> 시스템 복원 </a> </li> <li> <a href = "#"</li> href = "#"> 연결 끊기 </a> </li> <li> <a href = "#"> 사용자 삭제 </a> </a> </li> </li> </li> </li> </li> </li> </ul> <!-오른쪽을 먼저 쓰고 오른쪽-> <!-탐색 바의 버튼-> <button type = "button"</button "> <sign in reak in the vorm in the vorm in the voligation in </button"> <! <입력 유형 = "텍스트"자리 표시 자 = "검색 내용 입력"> </div> <버튼 유형 = "Summit"> 검색 </button> </div> </div> </nav> </nav>
웹 페이지를 사용하여 블로그 나 파일을 탐색하면 레벨이 있습니다. 현재 이전 레벨 또는 여러 레벨로 돌아 가려면 위치 탐색 표시 줄이 필요합니다.
<!-내비게이션 바-> <ol> <li> <a href = "#"> 내 백엔드 </a> </li> <li> <a href = "#"> 시스템 분석 </a> </li> <!-현재 위치를 점프로 클릭 할 수 없습니다-> <li> 액세스 통계 </li> </ol>
3. 진행률 바
<div> <!-Progress-Bar-Striped는 줄무늬를 설정하고 활성 세트 애니메이션-> <!-스타일 너비의 백분율에 따라 진행 막대의 백분율을 표시합니다.> <div role = "progressbar"aria-valueNow = "60"aria-valuemin = "0"aria-valuemax = "100"> <! <! <! <! bar-> 30% </div> </div>
4. 미디어 객체
이것은 기본적으로 Weibo 또는 Twitter에서 동일한 메시지입니다.
왼쪽의 아바타, 오른쪽의 제목과 텍스트
<div> <div> <img src = "images/1.jpg"> </div> <div> <h4> 미디어 제목 </h4> <p> cras sit amet nibh liber, Gravida nulla. nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, viverra turpis에서 vulputate의 전정. Fusce Josmimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec Lacinia congue felis. </p> </div> </div>
5. Pagination
이것은 여러 페이지입니다
<ul> <li> <a href = "#"aria-label = "previous"> <!-왼쪽의 이중 화살표-> <span aria-hidden = "true"> </span> </a> </li> <!-첫 번째 옵션은 활성화됩니다-> <li> <a href = "#"> 1 </a> <li> <a href = "#"#"#"#"#">> <li> < <li> <a href = "#"> 3 </a >> </li> <li> <a href = "#"> 4 </a> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 6 </a> <li> <a href = "#"> 7 </a> 7 </a> "> href = "#"> 7 </a> </a> </li> <li> <a href = "#"> aria-label = "next"> <!-오른쪽에 이중 화살표-> <span aria-hidden = "true">»</span> </a> </li> </ul>
이것은 이전 페이지와 다음 페이지입니다.
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span previous page </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> </span> 다음 페이지 </a> </li> </li>
위는 두 개의 버튼이 함께 연결되어 있습니다
다음은 두 개의 버튼이 양쪽에 배포되므로 작성됩니다.
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span previous page </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> </span> 다음 페이지 </a> </li> </li>
6. 목록
목록의 효과는 매우 일반적이며 사용하기가 매우 간단합니다.
<div> <!-첫 번째 항목이 선택되었습니다-> <a href = "#"> 액세스 통계 </a> <a href = "#"> 정보 통계 </a> <a href = "#"> 로그 통계 </a> <a href = "#"> 정보 통계 </a> <a href = "#"</a> href = "#"> 정보 통계 </a> <a href = "#"> 정보 통계 </a> </div>
위의 구성 요소를 사용하여 백엔드 정적 웹 페이지를 만듭니다.
효과는 그림과 같이 나타납니다
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.