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相关推荐

原生实现freeCodeCamp上的Build a Personal Portfolio Webpage
目标网站: 设计一个类似于: https://codepen.io/freeCodeCamp/full/YqLyXB/的个人作品集. 完成效果图: 心得体会: 一开始最大的困扰是怎么监听滚动滑动,搜索 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
[HTML模板]个人作品集网站模板 AALI V1.0 - PERSONAL PORTFOLIO TEMPLATE
下载地址:https://download.csdn.net/download/tysonchiu/71971735https://download.csdn.net/download/tysonch ...
解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:本人遇到这个问题是用文中最后一句话解决:" 在组件的样式中记得添加 'scoped' ...
在Windows上build Spark
2019独角兽企业重金招聘Python工程师标准>>> 在本机(Windows 8)上安装spark玩一玩,Spark的Quick Start上没有指明具体步骤,自己Build好了之 ...
freecodecamp上的html练习项目
learn html by building a cat photo app freecodecamp,html练习项目learn html by building a cat photo app 下 ...
使用插件Bootstrap Fileinput文件上传
最近的项目中有用到这个插件,觉得功能挺强大的. GitHub地址:https://github.com/kartik-v/bootstrap-fileinput/ git地址:https://gith ...
Bootstrap FileInput 图片上传插件
最近找了一个比较好用的图片和文件上传插件,Bootstrap-file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,无论是aspx.net 还是MVC.ne ...

使用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

实现效果

使用bootstrap实现freeCodeCamp上Build a Personal Portfolio Webpage相关推荐

最新文章

热门文章