使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpage

骑猪看日落 2022-02-28 13:03 156阅读 0赞

### 使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpage ###

*  bootstrap中标签页插件
 *   *  HTML
     *  JS
 *  bootstrap中滚动监听插件
 *   *  需要相对定位（relative positioning）
     *  通过 data 属性调用
     *  css
     *  html
     *  js
 *  标签页与滚动监听插件一起使用不生效
 *   *  html
     *  css
     *  js
 *  实现效果

# bootstrap中标签页插件 #

## HTML ##

<div>
    
      
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
    
      
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
      </div>
    
    </div>

## JS ##

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

# bootstrap中滚动监听插件 #

## 需要相对定位（relative positioning） ##

无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 元素。When scrollspying on elements other than the , be sure to have a height set and overflow-y: scroll; applied.

## 通过 data 属性调用 ##

To easily add scrollspy behavior to your topbar navigation, add data-spy=“scroll” to the element you want to spy on (most typically this would be the ). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

## css ##

body {
        
      position: relative;
    }

## html ##

## js ##

$('#myTabContent').scrollspy({
        
         target: '#navbar-example' 
        })

# 标签页与滚动监听插件一起使用不生效 #

使用过程中发现两者不可以一起使用，后发现**data-target**阻止了a标签跳转，删去后解决问题。

## html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>freeCodeCamp : Build a Personal Portfolio Webpage</title>
      
      <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
      <link rel="stylesheet" href="../css/index.css">
    
    </head>
    <body>
      <div class="all-content">
        <header class="top">
          <div class="w">
            
            <div class="header-left">
              <a href="#">qlip|UI/UX Design and Development</a>
            </div>
            
            
            <div id="navbar-example">
              
              <ul class="nav nav-tabs " role="tablist" id="myTab">
                <li role="presentation" class="active"><a href="#ABOUT"  role="tab" >ABOUT</a></li>
                <li role="presentation"><a href="#POPRTFOLIO"  role="tab" >POPRTFOLIO</a></li>
                <li role="presentation"><a href="#CONTACT"  role="tab" >CONTACT</a></li>
              </ul>
            </div>
          </div>
          
        </header>
        
        <div class="w2">
          
          <div class="tab-content" id="myTabContent" data-spy="scroll" data-target="#navbar-example" data-offset="0">
            <div  id="ABOUT">
              
              <div class="about-left">
                <p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
                <div class="about-left-hr">
                  <hr>
                </div>
                <p>Web Developer - User Experience Designer - Graphic Artist</p>
              </div>
    
              
              <div class="about-right">
                <img src="../images/dog.png" width="380px">
                <p>A picture of Justin looking at San Francisco from across the Golden Gate Bridge.</p>
              </div>
              
            </div>
    
            <div id="POPRTFOLIO">
              <p>PORTFOLIO</p>
              <div class="poprtfolio-hr">
                <hr>
              </div>
            </div>
    
            <div  id="CONTACT">
              <p>CONTACT ME</p>
              <div class="contact-hr">
                <hr>
              </div>
              
              <div class="contact-bottom">
                <div class="contact-b-left">
                  <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputFile">File input</label>
                      <input type="file" id="exampleInputFile">
                      <p class="help-block">Example block-level help text here.</p>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox"> Check me out
                      </label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                </div>
    
                <div class="contact-b-right">
                  <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your sudoku, random questions about the universe and the meaning of life, or even if only for some nice Fika here in stunning Toronto... just feel free to drop me a line anytime.</p>
                  <p>I promise to reply A.S.A.P.</p>
                  <p>Note: No spam/soliciting pour moi, merci </p>
                </div>
              </div>
              
            </div>
          </div>
        </div>
    
        <div class="bottom">
          <div class="w3">
            
            <div class="footer-left">
              <p>ABOUT THIS PAGE</p>
              <p>Made by <a href="#">ZLQ</a>.</p>
            </div>
            
            
            <div class="footer-right">
              <p>AROUND THE WEB</p>
            </div>
          </div>
          
        </div>
        <footer>
          <p>qlip © 2019. All Rights Reversed</p>
        </footer>
    
      </div>
      
      
    </body>
    
    <script src="../plugins/jquery/jquery-3.3.1.js"></script>
    <script src="../plugins/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    
    </html>

## css ##

* {
        
      margin: 0;
      padding: 0;
    }
    body {
        
      background-color: #888;
    }
    .top {
        
      background-color: #722872;
    }
    .w {
        
      position: relative;
      height: 80px;
      
      width: 1200px;
      margin: 0 auto;
    }
    .header-left {
        
      position: absolute;
      left: 0;
      top: 0;
      padding-top: 10px;
      padding-left: 10px;
    }
    .header-left a {
        
      opacity: 0;
      font-size: 20px;
    }
    .header-left a:hover {
        
      opacity: 1;
    }
    #navbar-example  {
        
     position: absolute;
     right: 0;
     top: 0;
     padding-top: 10px;
    }
    .w2 {
        
      width: 1200px;
      margin: 0 auto;
    }
    #ABOUT {
        
      display: flex;
      justify-content: space-between;
      background-color: #aaa;
      height: 300px;
    }
    .about-left {
        
      width: 800px;
      padding: 50px 50px;
    }
    .about-left p {
        
      font-size: 24px;
      color: white;
    }
    .about-left p:nth-child(1) {
        
      font-size: 20px;
      text-align: right;
    }
    .about-left-hr {
        
      padding: 5px 0 5px 140px;
    }
    .about-left hr {
        
      width: 500px;
      border: 3px solid white;
      text-align: right;
    }
    .about-right p {
        
      font-size: 20px;
      color: white;
    }
    #POPRTFOLIO {
        
      text-align: center;
      height: 300px;
      background-color: white;
      padding: 50px 50px;
      border-bottom: 1px solid #ccc;
    }
    #POPRTFOLIO p {
        
      font-size: 30px;
      color: #a28888;
    }
    .poprtfolio-hr {
        
      width: 500px;
      margin: 0 auto;
    }
    .poprtfolio-hr hr {
        
      border: 3px solid #888;
    }
    #CONTACT {
        
      text-align: center;
      padding: 50px 50px;
      background-color: white;
    }
    #CONTACT p {
        
      font-size: 30px;
      color: #a28888;
    }
    .contact-hr {
        
      width: 500px;
      margin: 0 auto;
    }
    .contact-hr hr {
        
      border: 3px solid #888;
    }
    .contact-bottom {
        
      display: flex;
      justify-content: space-between;
    }
    .contact-b-left {
        
      flex: 1;
    }
    .contact-b-right {
        
      flex: 1;
    }
    #myTabContent {
        
      margin-top: 0px;
      position: relative;
      overflow: auto;
      height: 900px;
    }
    .bottom {
        
      background-color: #aaa;
      height: 200px;
    }
    .w3 {
        
      width: 1200px; 
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    .footer-left {
        
      padding: 40px 20px;
      flex: 1;
    }
    .footer-left p {
        
      color: white;
      font-size: 30px;
    }
    .footer-left p:nth-child(2) {
        
      font-size: 24px;
    }
    .footer-right {
        
      padding: 40px 20px;
      flex: 1;
    }
    .footer-right p {
        
      color: white;
      font-size: 30px;
    }
    footer {
        
      height: 100px;
      background-color: #722872;
      text-align: center;
    }
    footer p {
        
      color: black;
      font-size: 20px;
      line-height: 100px;
    }

## js ##

$(function(){
        
      //调用滚动监听
      $('#myTabContent').scrollspy({
        
         target: '#navbar-example' 
        })
      
      //启动标签页
      $('#myTab a').click(function (e) {
        
        e.preventDefault()
        $(this).tab('show')
      })
    
    });

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]  
实现滚动监听时，监听对象没有使用**body**导致有两条滚动条，后期懒得再改。  
注意再引入jQuery之后再引入bootstrap，bootstrap是基于jQuery的，不然不会失效。

本文供自己学习踩坑记录，欢迎纠错~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20220228/614a12455d004925aa2856cbd851fa05.png