Bootstrap3 Navs не отображается правильно

Я бы хотел, чтобы на моем сайте было меню с вкладками, как показано на рисунке в Twitter. Загрузочный сайт.Bootstrap3 Navs не отображается правильно

Я скачал JQuery 1.11.2 в папке js/ и поместил следующую в головной секции:

<link rel="stylesheet" href="css/bootstrap.css"> 

<!--- Google fonts-->  

<!-- javascript libraries --> 
<script src="js/jquery-1.11.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

<!--- personal styles should always be below bootstrap --> 
<link rel="stylesheet" href="css/theme.css">

Далее, чтобы получить меню NAVS я скопированный и вставить код со страницы компоненты Bootstrap (Я просто изменил текст для отображения)

<div class="row"> 
    <div class="col-md-12 site-menu"> 
     <ul class="nav nav-tabs"> 
      <li role="presentation" class="active"><a href="index.html">Home</a></li> 
      <li role="presentation"><a href="#">Projects</a></li> 
      <li role="presentation"><a href="#">About</a></li> 
     </ul> 
    </div>

Navs однако не выглядят так, как я ожидат ted, ссылки отображаются как маркированный список.

Что я делаю неправильно? Как я могу отображать вкладки Navs Tabs и Navs?

источник

2015-04-26 lucacerone

Я думаю, вы не связаны файлы CSS правильно, попробуйте с последних версия CDN ссылки,

$('#myTab a').click(function (e) { 
 
    e.preventDefault() 
 
    $(this).tab('show') 
 
})

<!--- Bootstrap Core CSS --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!--- personal styles should always be below Bootstrap Core CSS --> 
 
<!--<link rel="stylesheet" href="css/theme.css">--> 
 

 
<!--- Google fonts--> 
 

 

 
<div class="row"> 
 
    <div class="col-md-12 site-menu"> 
 
    <ul id="myTab" class="nav nav-tabs"> 
 
     <li role="presentation" class="active"><a href="index.html">Home</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">Projects</a> 
 
     </li> 
 
     <li role="presentation"><a href="#">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 

 
    <!-- JQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <!--- Bootstrap Core JS --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Общий контур HTML файл должен выглядеть следующим образом :

<!DOCTYPE html> 
<html> 

<head> 
    <!-- Bootstrap Core CSS--> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <!-- Google Fonts --> 
    <link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Amatic+SC:400,700" rel="stylesheet"> 
    <!-- My Theme style --> 
    <link href="css/style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

    <!--lots of html--> 
    <!--lots of html--> 
    <!--lots of html--> 


    <!-- jQuery 2.0.2 --> 
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> 
    <!-- Bootstrap Core JS --> 
    <script src="js/bootstrap.min.js" type="text/javascript"></script> 

    <script> 
    <!-- some JS Function --> 
    </script> 
</body> 

</html>

источник

2015-04-26 14:08:10

благодарит за сообщение. Две вещи мне понятны, хотя ... где я должен размещать вызовы JQuery? (и почему мои не связаны правильно? Я хотел бы использовать мой собственный хостинг, а не полагаться на CDN) – lucacerone

Это хорошая практика размещения Javascript-библиотек (jquery.min.js, bootstrap.min, js и т. д.) просто перед закрывающим телом тела ''. Если вы делаете звонки на любые функции в этих библиотеках, поместите их после того, как вы их связали, еще раз перед закрытием '' тега –

OK, используя CDN и перемещая библиотеки до того, как не исправил мою проблему, хотя .. – lucacerone

Bootstrap3 Navs не отображается правильно

ответ

Смежные вопросы