2014-09-02 3 views
0

이것은 부트 스트랩을 사용한 첫 시도이다. 나는 단지 기본 메뉴 바를 작동 시키려고 노력하고있다. 내가보기에 모든 것이 잘 작동하지만 괜찮아 보인다. 나는 새로운 다운로드와 함께 CSS를 스위치 아웃하려고했지만 여전히 나던 것은 아무것도 수정하지 않는 것 같다. 단순한 부트 스트랩이 작동하지만 나던데 제대로 보이지 않는다.

는 HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div class="container"> 

     <div class="row"> 
      <nav class="navbar"> 
      <div class="navbar-inner"> 
       <a href="#" class="brand">test</a> 
       <ul class="nav"> 
       <li><a href="#">Item1</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Item1</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">Item1</a></li> 
       <li class="divider-vertical"></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#">Item1</a></li> 
         <li><a href="#">Item1</a></li> 
         <li><a href="#">Item1</a></li> 
        </ul> 
       </li> 

       </ul> 
      </div> 
      </nav> 
     </div> 
    </div> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html> 

아무것도 복잡합니다. 부트 스트랩 웹 사이트에서 기본 구조를 얻었습니다. 새 메뉴를 추가했습니다.

그것은 내가 바로 이곳 또한 부트 스트랩 JS 파일에있을 CSS 파일을 확인 한이

enter image description here

것 같습니다.

+0

당신이 달성하고자합니까? 보십시오 : http://getbootstrap.com/examples/starter-template/ – Andi

+0

당신은 메뉴를 수평으로하고 싶습니까? – letsjak

+0

문제가 무엇보다 효과적입니까? – user3811714

답변

1

'는'태그

<a href="#" class="brand navbar-brand">test</a> 

firts에 클래스의 네비게이션 바 브랜드 '를 추가하고 첫 번째'UL '태그에 클래스 네비게이션 바 - 탐색을 추가 : 다음으로

<ul class="nav navbar-nav "> 

예를 잘 보입니다.

나는 아직 이미지를 게시 할 수 없습니다 만, 다음 링크에서 당신이 변경 한 후 예를 들어 어떻게 보이는지 확인할 수 있습니다

:

http://i.stack.imgur.com/pdZCi.png

관련 문제