bootstrap中标签页插件

HTML

<div>

  <!-- Nav tabs -->
  <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>

  <!-- Tab panes -->
  <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

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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">
        <!--header左边区域-->
        <div class="header-left">
          <a href="#">qlip|UI/UX Design and Development</a>
        </div>
        
        <!--header右边区域-->
        <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">
          <!--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>

          <!--about右边区域-->
          <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">
        <!--footer左边区域-->
        <div class="footer-left">
          <p>ABOUT THIS PAGE</p>
          <p>Made by <a href="#">ZLQ</a>.</p>
        </div>
        
        <!--footer右边区域-->
        <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')
  })

});

实现效果

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

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

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

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

bootstrap中标签页插件

HTML

JS

bootstrap中滚动监听插件

需要相对定位（relative positioning）

通过 data 属性调用

css

html

js

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

html

css

js

实现效果

猜你喜欢