부트 스트랩의 웹 사이트 페이지 검색

나는 초심자이며 코드를 가르치려고합니다. HTML을 알고 최근에 자바 스크립트 구문과 부트 스트랩의 기초를 배웠습니다. 배우는 가장 좋은 방법은 무언가를 만드는 것입니다. 그래서 나는 사람들이 유명한 사람들을 검색하여 그들이 어떤 책을 추천하는지 볼 수있는 웹 사이트를 만들고자합니다. 예를 들어, Elon Musk이 어떤 책을 추천하는지 알고 싶으면 이름을 입력 할 수 있어야하며, 추천 한 모든 책의 목록이있는 페이지로 이동하게됩니다.부트 스트랩의 웹 사이트 페이지 검색

색인 페이지는 Google과 비슷한 모양으로 준비되어 있으며 검색 막대를 어떻게 작동시켜 사람들이 내가 작성할 모든 페이지를 검색 할 수 있는지 이해하려고합니다. 사람들이 이름의 처음 몇 글자를 입력하고 페이지로 이동하라는 제안을 클릭 할 수 있도록 자동 완성 기능이 필요하다는 것을 알고 있습니다.

여기에 지금까지 내 코드입니다 :

#content {height: 100%;} 
 
html, body {height: 100%;} 
 

 
.center-block { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 200px; 
 
    margin-bottom: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<!-- Bootstrap JS from CDN --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<!-- Bootstrap CSS from CDN --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Custom CSS --> 
 
<link href="css/styles.css" rel="stylesheet"> 
 

 
<title>Page Title</title> 
 

 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="span4"></div> 
 
     <div class="span4"><img class="center-block" src="images/logo.png" width="270" height="95" alt="Google" id="logo"></div> 
 
     <div class="span4"></div> 
 
    </div> 
 

 
<div class="row">  
 
\t <div class="col-xs-8 col-xs-offset-2"> 
 
\t \t <div class="input-group"> 
 
\t \t \t <input type="text" class="form-control" name="x" placeholder="Search term..."> 
 
\t \t \t  <span class="input-group-btn"> 
 
\t \t \t  \t <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> 
 
\t \t \t \t </span> 
 
\t \t </div> 
 
\t </div> \t   
 
</div> 
 
</div> 
 
</div> \t 
 

 
<div id="footer"> 
 
     <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
 
     <div class="container"> 
 

 
      <ul class="nav navbar-nav navbar-left"> 
 
      <li><a href="#">Submit</a></li> 
 
      </ul> 
 

 
      <ul class="nav navbar-nav navbar-right"> 
 

 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Privacy</a></li> 
 
      <li><a href="#">Donate</a></li> 
 

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

 

 
</body> 
 
</html>

출처

2016-08-20 Urvesh Vasani

처음부터 자신의 뭔가를 구축하고 배울 수있는, 가장 좋은 방법 말했듯이. 브라우저에 의해 요청에 응답

서버을 : 기능을 만들려면 당신은 당신이 필요로하는 기술. 으로 시작하는 것이 좋습니다. (https://expressjs.com/)으로 특히 노드 js을 제안합니다. 설치와 시작은 정말 간단합니다.
데이터베이스 (또는 정적 JSON 파일)은 예를 에 사용할 수있는 노드 몽고 DB 당신이 괜찮 부트 스트랩을 사용하는몽구스 (http://mongoosejs.com/)
프런트 엔드 프레임 워크와 라이브러리와! 을 추가하십시오. js (https://facebook.github.io/react/)을 입력하면 준비가 완료됩니다.

제 제안은 라이브러리/프레임 워크를 사용하고 조금씩 배우는 것입니다. 서버에서 시작하여 기본 페이지 (또는 페이지 만)를 만들어보십시오. AJAX techinque로 자동 완성 데이터를 가져올 수 있습니다. 반응에는 잘 쓰여진 구성 요소가 많이 있으며 예를 들어 Ajax 자동 완성을 사용하면 다음을 사용할 수 있습니다. https://jedwatson.github.io/react-select/

해피 러닝!

출처

2016-08-20 15:51:27 Hardy

고마워요! 나는 지금 가까이 다가 가고있다!! –

부트 스트랩의 웹 사이트 페이지 검색

답변

관련 문제