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

[부트스트랩 사용하기]

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

소개용 타이틀

• 메인~!
• 링크1
• 링크2

소개용 타이틀

• 메인~!
• 링크1
• 링크2

대략 이렇게 생겼습니다.

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

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

하얀색 메뉴

<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>

이상입니다.

   

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