Note: The path to Bootstrap related files, Bootstrap depends on jQuery, jQuery needs to be loaded first

index.html：

          
   
 
个人简历
 
 
 
 
基本信息
 
 
 
某某
  
 
  
 
 
个人介绍
 
 
 滴滴答答滴滴答答滴滴答答滴滴答 答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答 
 
 
 
 
姓名
 
YYY
 
年龄
 
18
 
 
 
学校
 
XX大学
 
学历
 
本科
 
 
 
专业
 
软件工程
 
学制
 
全日制
 
 
 
 
 
  
 
个人荣誉
 
 获得****************************************** 
我的空间
 
 
 
 个人博客 
 
 个人博客园 
 
 我的github 
 
 
个人技能
 
 
1.***************
 
2.***************
 
3.***************
 
4.***************
 
5.***************
 
 
 
 
 
职业技能
 
 JavaScript Vue.js  
 
 
 熟悉 
 
 
 Node.js PHP  
 
 
 熟悉 
 
 
 html/css 
 
 
 熟悉 
 
 
 数据结构/算法 
 
 
 熟悉 
 
 
 
 
项目展示
 
 
 
 
 
 
 
 
 
 
  
项目 1
 
 
  
项目 2
 
 
  
项目 3
 
 
  
项目 4
 
        
 
 
 
 
 
 
 
 
 
 
 
 
 
项目说明
 
项目说明
 
项目说明
 
项目说明
 
项目说明
 
项目 1
 
 
 
项目说明
 
项目说明
 
项目说明
 
项目说明
 
项目 2
 
 
 
项目说明
 
项目 3
 
 
 
项目说明
 
项目 4
 
        
 
 
 
 
 
请联系我
 
 
如果你感兴趣
 
 
 Email  
 
 请联系我 重置 
 
 
 
 
 
 
  

Related recommendations: "bootstrap Getting Started Tutorial"

css

/* * Globals */ body { font-family: Georgia, "Times New Roman", Times, serif; color: #555; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #333; } /* * Override Bootstrap's default container. */ @media (min-width: 1200px) { .container { width: 970px; } } /* * Masthead for nav */ .blog-masthead { background-color: #428bca; -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1); box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1); } /* Nav links */ .blog-nav-item { position: relative; display: inline-block; padding: 10px; font-weight: 500; color: #cdddeb; } .blog-nav-item:hover, .blog-nav-item:focus { color: #fff; text-decoration: none; } /* Active state gets a caret at the bottom */ .blog-nav .active { color: #fff; } .blog-nav .active:after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin-left: -5px; vertical-align: middle; content: " "; border-right: 5px solid transparent; border-bottom: 5px solid; border-left: 5px solid transparent; } /* * Blog name and description */ .blog-header { padding-top: 20px; padding-bottom: 20px; } .blog-title { margin-top: 30px; margin-bottom: 0; font-size: 60px; font-weight: normal; } .blog-description { font-size: 20px; color: #999; } /* * Main column and sidebar layout */ .blog-main { font-size: 18px; line-height: 1.5; } /* Sidebar modules for boxing content */ .sidebar-module { padding: 15px; margin: 0 -15px 15px; } .sidebar-module-inset { padding: 15px; background-color: #f5f5f5; border-radius: 4px; } .sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child { margin-bottom: 0; } /* Pagination */ .pager { margin-bottom: 60px; text-align: left; } .pager>li>a { width: 140px; padding: 10px 20px; text-align: center; border-radius: 30px; } /* * Blog posts */ .blog-post { margin-bottom: 60px; } .blog-post-title { margin-bottom: 5px; font-size: 40px; } .blog-post-meta { margin-bottom: 20px; color: #999; } /* * Footer */ .blog-footer { padding: 40px 0; color: #999; text-align: center; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; } .blog-footer p:last-child { margin-bottom: 0; }

header, footer, nav, div, section, aside, article, p { border: 1px dotted #f0f0f0; } .divContent { min-height: 350px; }

The above is the detailed content of How to create a resume using bootstrap. For more information, please follow other related articles on the PHP Chinese website!