본문 바로가기
Program/오래된 PHP 게시판

[Twitter bootstrap 트위터 부트스트랩]부트스트랩 강의 시작에 앞서 - 트위터 부트스트랩 메뉴 Navbar

by 한빛가람 2013. 4. 8.
반응형

[부트스트랩 사용하기]

안녕하세요 . 필자입니다. 지금은 트위터 개발자 몇분이 개발하신 부트스트랩을 알려드리려 합니다. 웹 디자인이 서투신 분들이나 그런분들께 추천드리는 건데요 한번 상단에 넣을 메뉴부터 보겠습니다.

대략 이렇게 생겼습니다.


검은색과 하얀색밖에 쓸수없는게 흠이지만 여러 사이트에 응용되며 사용되고 있습니다.


이 메뉴 소스는 다음과 같습니다.

하얀색 메뉴

<div class="navbar">

  <div class="navbar-inner">

    <a class="brand" href="#">소개용 타이틀</a>

    <ul class="nav">

      <li class="active"><a href="#">메인~!</a></li>

      <li><a href="#">링크1</a></li>

      <li><a href="#">링크2</a></li>

    </ul>

  </div>

그리고 검은색 메뉴

<div class="navbar navbar-inverse">

<div class="navbar-inner">

<div class="container">

<a class="brand" href="#">소개용 타이틀</a>

            <ul class="nav">

              <li class="active"><a href="#">메인~!</a></li>

              <li><a href="#">링크1</a></li>

              <li><a href="#">링크2</a></li>

            </ul>

          </div>

        </div>

      </div>

이상입니다.




   


아래의 손가락버튼을 눌러주시면 블로그에 큰 힘이 됩니다.







크리에이티브 커먼즈 라이선스
한빛가람 필자가 게시한 대부분의 블로그 게시물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다. 게시물에 CCL이 적용되지 아니하다고 적혀있는 경우엔 본 라이선스 적용 대상이 아닙니다.

댓글0