Latest web development tutorials

재단 사이드 바

사이드 바 탐색

재단 사용 <ul class="side-nav"> "> 사이드 바을 만들 수 있습니다 :

예

<UL 클래스 = "측면 탐색 ">
<리> <a의 HREF = "#"> 링크 1 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 2 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 3 </ A> </ 리>
<리> <a의 HREF = "#"> 링크 4 </ A> </ 리>
</ UL>

»시도

분할 선 활성화 링크

나는에있는 링크를 클릭 <li> 사용 .active 사용하여 식별 클래스 .divider 수평 라인을 추가하는 클래스를 :

예

<UL 클래스 = "측면 탐색 ">
<리 클래스 = "활성"> <a 클래스 = "a" HREF = "#"> 링크 1 </ A> </ 리>
<리> <a 클래스 = "a" HREF = "#"> 링크 2 </ A> </ 리>
<리 = "분배기"클래스> </ 리>
<리> <a 클래스 = "a" HREF = "#"> 링크 3 </ A> </ 리>
<리> <a 클래스 = "a" HREF = "#"> 링크 4 </ A> </ 리>
</ UL>

»시도

그리드 사이드 바

다음과 같이 우리는 측면 탐색 모음을 설정하는 그리드 디자인 모드를 사용할 수 있습니다, 예는 다음과 같습니다

예

<사업부 클래스 = "행">
<사업부 클래스 = "중간 4 열"스타일 = "배경 색 : #의 f1f1f1;">
<UL 클래스 = "측면 탐색 ">
<리 클래스 = "활성"> <a의 HREF = "#"> 홈 </ A> </ 리>
<리> <a의 HREF는 = "#"> HTML </ A> </ li>로 알아보기
...
</ UL>
</ DIV>
<사업부 클래스 = "중간 8 열">
<H1> 사이드 탐색 </ H1 >
<P> 일부 텍스트 .. </ P>
...
</ DIV>
</ DIV>

»시도