2015-08-06 3 views
-1

Я хочу использовать this пример для веб-сайта. Как его использовать? Должен ли я скопировать 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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Starter Template for Bootstrap</title> 

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

    <!-- Custom styles for this template --> 
    <link href="starter-template.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[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> 

    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

    <div class="container"> 

     <div class="starter-template"> 
     <h1>Bootstrap starter template</h1> 
     <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
     </div> 

    </div><!-- /.container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="../../dist/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
    </body> 
</html> 

ответ

1

нужны исправить все маршруты статических файлов

<!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"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 

    <title>Starter Template for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]> 
    <script src="http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[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> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
        aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="container"> 

    <div class="starter-template"> 
     <h1>Bootstrap starter template</h1> 

     <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a 
      mostly barebones HTML document.</p> 
    </div> 

</div> 
<!-- /.container --> 


<!-- Bootstrap core JavaScript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> 
</body> 
</html> 
Смежные вопросы