【免费】用bootstrap3+javascript实现个人响应式网站资源-CSDN文库

共39个文件

jpg：9个

js：6个

css：5个

javascript

html5

css3

bootstrap3

需积分: 0 110 浏览量更新于2023-04-03 1 收藏 1.37MB ZIP 举报

Bootstrap3和JavaScript是现代网页开发中的重要工具，用于构建功能丰富、响应迅速的个人网站。在本项目中，我们将深入探讨如何结合这两种技术来创建一个适应不同设备屏幕大小的个人响应式网站。 Bootstrap3是Twitter推出的一个开源前端框架，它提供了丰富的预设样式、网格系统、组件和JavaScript插件，大大简化了网页设计和开发过程。其核心特性是响应式设计，意味着网站布局会根据用户设备的屏幕尺寸自动调整，确保在手机、平板和桌面电脑上都能呈现出良好的视觉效果。响应式设计的关键在于媒体查询（Media Queries），这是CSS3的一个重要特性。通过设置不同的断点，我们可以定义在不同屏幕尺寸下应用的样式。Bootstrap3预设了一些常见的断点，如xs（额外小）、sm（小）、md（中）和lg（大），使得开发者可以轻松地创建跨设备的布局。 HTML5则为现代网页提供了更多语义化的元素，如<header>、<nav>、<section>、<article>等，这些元素有助于提高页面结构的可读性和可访问性。同时，HTML5引入的新特性，如离线存储、拖放功能和画布元素，也极大地丰富了网页交互体验。 JavaScript是实现动态效果和用户交互的核心语言。在Bootstrap3中，许多组件如模态框（Modal）、下拉菜单（Dropdown）和轮播图（Carousel）都依赖于JavaScript插件。通过编写或调用这些插件，我们可以实现页面上的动态行为，如点击按钮显示隐藏内容，或者滚动到页面顶部。在"Bootstrap3个人简历响应式网页模板"中，我们可能看到以下主要组成部分： 1. **头部（Header）**：包含导航栏，通常使用Bootstrap的.navbar类，可以实现固定在顶部、折叠在小屏幕上等功能。 2. **主内容（Main Content）**：个人简介、技能展示、项目经验等可以通过Bootstrap的栅格系统（Grid System）进行布局，以适应不同屏幕大小。 3. **简历（Resume）**：使用HTML5的<section>和<article>元素，结合Bootstrap的样式，呈现清晰、美观的简历信息。 4. **作品集（Portfolio）**：可以使用Bootstrap的卡片（Card）组件展示项目，通过JavaScript实现图片轮播或预览功能。 5. **联系表单（Contact Form）**：利用HTML5的<form>元素和Bootstrap的表单样式，结合JavaScript实现验证和提交功能。 6. **页脚（Footer）**：包含版权信息、社交媒体链接等，同样可以使用Bootstrap的预设样式。在实际开发中，我们需要确保所有的HTML标记正确无误，CSS样式层次清晰，JavaScript代码高效且无冲突。同时，为了提高网页性能，应优化图片大小，减少HTTP请求，并考虑SEO（搜索引擎优化）策略。通过熟练运用Bootstrap3的响应式框架和JavaScript的动态效果，我们可以创建出既美观又实用的个人响应式网站，无论用户使用何种设备，都能获得一致的浏览体验。在实际项目中，不断学习和实践这些技术，将有助于提升我们的网页开发技能。

收起资源包目录

Bootstrap3个人简历响应式网页模板.zip （39个子文件）

Bootstrap3个人简历响应式网页模板

main.js 2KB

vendor

modernizr-2.6.2.min.js 15KB

jquery-1.10.2.min.js 91KB

min

main.min.js 2KB

plugins.min.js 325B

plugins.js 736B

css

bootstrap.min.css 111KB

font-awesome.css 26KB

normalize.css 9KB

owl-carousel.css 6KB

templatemo-style.css 12KB

index.html 12KB

images

2.jpg 64KB

6.jpg 73KB

logo.png 2KB

1.jpg 82KB

5.jpg 75KB

bg.jpg 32KB

8.jpg 53KB

3.jpg 117KB

7.jpg 89KB

4.jpg 148KB

fonts

Roboto-Regular-webfont.woff 24KB

FontAwesome.otf 84KB

fontawesome-webfont.eot 55KB

Roboto-Light-webfont.woff 24KB

Roboto-Light-webfont.svg 73KB

Roboto-Light-webfont.eot 20KB

fontawesome-webfont.woff 64KB

Roboto-Bold-webfont.woff 24KB

Roboto-Regular-webfont.ttf 44KB

Roboto-Bold-webfont.ttf 44KB

Roboto-Bold-webfont.svg 70KB

Roboto-Regular-webfont.svg 71KB

Roboto-Light-webfont.ttf 45KB

fontawesome-webfont.svg 280KB

Roboto-Regular-webfont.eot 21KB

fontawesome-webfont.ttf 110KB

Roboto-Bold-webfont.eot 20KB

资源推荐

资源预览

资源评论

<!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>个人简历响应式网页</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/templatemo-style.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <div class="site-bg"></div> <div class="site-bg-overlay"></div>  <div class="top-header"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <p class="phone-info">Call us: <a href="#">010 020 0340</a></p> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="social-icons"> <ul> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> <li><a href="#" class="fa fa-dribbble"></a></li> <li><a href="#" class="fa fa-rss"></a></li> </ul> </div> </div> </div> </div> </div>  <div class="visible-xs visible-sm responsive-menu"> <a href="#" class="toggle-menu"> <i class="fa fa-bars"></i> Show Menu </a> <div class="show-menu"> <ul class="main-menu"> <li> <a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>Home</a> </li> <li> <a class="show-2 aboutbutton" href="#"><i class="fa fa-user"></i>About Us</a> </li> <li> <a class="show-3 projectbutton" href="#"><i class="fa fa-camera"></i>Gallery</a> </li> <li> <a class="show-5 contactbutton" href="#"><i class="fa fa-envelope"></i>Contact</a> </li> </ul> </div> </div> <div class="copyrights">Collect from <a href="http://www.mycodes.net">免费模板</a></div> <div class="container" id="page-content"> <div class="row"> <div class="col-md-9 col-sm-12 content-holder">  <div id="menu-container"> <div class="logo-holder logo-top-margin"> <a href="#" class="site-brand"><img src="images/logo.png" alt=""></a> </div> <div id="menu-1" class="homepage home-section text-center"> <div class="welcome-text"> <h2>Hello, Welcome to <strong>RECTANGLE</strong></h2> <p>Rectangle is free mobile template brought to you by <span class="orange">template</span><span class="green">mo</span>.com website. You can download, edit and use this layout for any purpose. Please tell your friends about our website. Thank you.</p> <form action="#" method="get" class="subscribe-form"> <div class="row"> <fieldset class="col-md-offset-2 col-md-6"> <input name="subscribe-email" type="email" class="email" id="subscribe-email" placeholder="Write your email here.."> </fieldset> <fieldset class="col-md-4 button-holder"> <input name="submit" type="submit" class="button default" id="submit" value="Submit"> </fieldset> </div> <p class="subscribe-text">Please subscribe your email for latest updates!</p> </form> </div> </div> <div id="menu-2" class="content about-section"> <div class="row"> <div class="col-md-8 col-sm-8"> <div class="box-content profile"> <h3 class="widget-title">Learn about us</h3> <div class="profile-thumb"> <img src="images/8.jpg" alt=""> </div> <div class="profile-content"> <h5 class="profile-name">Linda Beauty</h5> <span class="profile-role">Creative Director</span> <p>Most of the images are from <a rel="nofollow" href="#">Unsplash.com</a> website. Curabitur auctor justo pretium purus varius sagittis. Aliquam porttitor leo sapien, hendrerit dapibus lorem.<br><br> Change icons by <a rel="nofollow" href="#/font-awesome-icon-world-map/">Font Awesome</a> (version 4). Example: <span class="blue"><i class="fa fa-refresh"></i></span></p> </div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="box-content"> <h3 class="widget-title">Background</h3> <p>Vestibulum pellentesque ante sit amet tristique hendrerit. Sed consequat, nunc lobortis faucibus pretium, enim nibh blandit est, nec sollicitudin est quam a neque. Aenean eget malesuada justo.</p> <div class="about-social"> <ul> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> <li><a href="#" class="fa fa-dribbble"></a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5"> <div class="box-content"> <h3 class="widget-title">Our Studio</h3> <div class="project-item"> <img src="images/7.jpg" alt=""> <div class="project-hover"> <h4>Great Nature Capture</h4> </div> </div> </div> </div> <div class="col-md-7 col-sm-7"> <div class="box-content"> <h3 class="widget-title">Our Technical Skills</h3> <ul class="progess-bars"> <li> <span>HTML CSS 80%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> </li> <li> <span>PHOTOSHOP 95%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div> </div> </li> <li> <span>WORDPRESS 70%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div> </div> </li> <li> <span>PHP mySQL 50%</span> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div> </div> </li> </ul> </div> </div> </div> </div> <div id="menu-3" class="content gallery-section"> <div class="box-content"> <h3 class="widget-title">Past Projects</h3> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="project-item"> <img src="images/1.jpg" alt=""> <div class="project-hover"> <h4>Great Nature Capture</h4> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="project-item"> <img src="images/2.jpg" alt=""> <div class="project-hover"> <h4>Another Image Caption</h4> </div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="proje