溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用bootstrap制作簡歷”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用bootstrap制作簡歷”吧！
注意：Bootstrap相關文件的路徑，Bootstrap依賴jQuery，需要先加載jQuery
index.html：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="../bs/js/bootstrap.min.js"></script> <link href="../bs/css/bootstrap.css" rel="stylesheet"> <link href="../bs/css/mystyle.css" rel="stylesheet"> <title>個人簡歷</title></head> <body> <nav class="navbar navbar-default"> <div> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar" aria-expanded="false" aria-controls="navbar"> <span></span> <span></span> <span></span> </button> <div class="collapse navbar-collapse" id="leadBar"> <ul class="navbar nav navbar-nav"> <li><a href="site.html" class="glyphicon glyphicon-home"></a></li> <li><a href="#info">基本信息</a></li> <li><a href="">職業技能</a></li> <li><a href="">項目展示</a></li> <li><a href="">請聯系我</a></li> </ul> </div> </div> </nav> <div> <h2>個人簡歷</h2> </div> <div class="divContent container"> <div> <h3>基本信息</h3> <div> <blockquote> <h3>某某</h3> <footer>XX工程師</footer> </blockquote> <div class="row text-center"> <img src="./img/zmz.jpg" alt="boy" width="150px" class="img-responsive img-circle img-thumbnail"> </div> <div class="row text-center"> <h4>個人介紹</h4> </div> <div> <span>滴滴答答滴滴答答滴滴答答滴滴答 答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答</span> </div> <div> <table class="table table-bordered table-striped table-hover table-condensed"> <tr> <td>姓名</td> <td>YYY</td> <td>年齡</td> <td>18</td> </tr> <tr> <td>學校</td> <td>XX大學</td> <td>學歷</td> <td>本科</td> </tr> <tr> <td>專業</td> <td>軟件工程</td> <td>學制</td> <td>全日制</td> </tr> </table> </div> </div> <div> <!-- 大屏幕 --> <div> <h3>個人榮譽</h3> <hr> <p2>獲得******************************************</p2> <h3>我的空間</h3> <hr> <div> <div> <a href=""><button>個人博客</button></a> </div> <div> <a href=""><button>個人博客園</button></a> </div> <div> <a href=""><button>我的github</button></a> </div> </div> <h3>個人技能</h3> <hr> <p>1.***************</p> <p>2.***************</p> <p>3.***************</p> <p>4.***************</p> <p>5.***************</p> </div> </div> </div> <div> <h3 id="skill">職業技能</h3> <p> <span class="label label-success">JavaScript</span> <span class="label label-success">Vue.js</span> <!-- <span class="label label-success">ssh</span> --> </p> <div> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 80%;"> <span>熟悉</span> </div> </div> <p> <span class="label label-success">Node.js</span> <span class="label label-success">PHP</span> <!-- <span class="label label-success">ssh</span> --> </p> <div> <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 75%;"> <span>熟悉</span> </div> </div> <p> <span class="label label-info">html/css</span> </p> <div> <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 70%;"> <span>熟悉</span> </div> </div> <p> <span class="label label-warning">數據結構/算法</span> </p> <div> <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 79%;"> <span>熟悉</span> </div> </div> </div> <div> <h3>項目展示</h3> <div> <div id="" class="myCarousel carousel slide"> <ol> <li data-target=".myCarousel" data-slide-to="0"></li> <li data-target=".myCarousel" data-slide-to="1"></li> <li data-target=".myCarousel" data-slide-to="2"></li> <li data-target=".myCarousel" data-slide-to="3"></li> </ol> <div> <div class="item active"> <img src="./img/img1.jpg" style="height: 406px;width: 650px" alt="第一張"> <div>項目 1</div> </div> <div> <img src="./img/img2.jpg" style="height: 406px;width: 650px" alt="第二張"> <div>項目 2</div> </div> <div> <img src="./img/img3.jpg" style="height: 406px;width: 650px" alt="第三張"> <div>項目 3</div> </div> <div> <img src="./img/img4.jpg" style="height: 406px;width: 650px" alt="第四張"> <div>項目 4</div> </div> <!--左右翻頁--> <a href=".myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"/> </a> <a href=".myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"/> </a> </div> </div> </div> <div> <div id="" class="myCarousel carousel slide"> <ol> <li data-target=".myCarousel" data-slide-to="0"></li> <li data-target=".myCarousel" data-slide-to="1"></li> <li data-target=".myCarousel" data-slide-to="2"></li> <li data-target=".myCarousel" data-slide-to="3"></li> </ol> <div> <div class="item active"> <p>項目說明</p> <p>項目說明</p> <p>項目說明</p> <p>項目說明</p> <p>項目說明</p> <div>項目 1</div> </div> <div> <p>項目說明</p> <p>項目說明</p> <p>項目說明</p> <p>項目說明</p> <div>項目 2</div> </div> <div> <p>項目說明</p> <div>項目 3</div> </div> <div> <p>項目說明</p> <div>項目 4</div> </div> <!--左右翻頁--> <a href=".myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"/> </a> <a href=".myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"/> </a> </div> </div> </div> </div> <div> <h3>請聯系我</h3> <div class="panel panel-default"> <div>如果你感興趣</div> <div> <form action="" method="post"> <label for="email">Email</label> <input type="email" id="email" /> <br/> <div class="btn-group pull-right"> <button type="submit" class="btn btn-success">請聯系我</button> <button type="reset" class="btn btn-danger">重置</button> </div> <div></div> </form> </div> </div> </div> </div> </body> </html>
css
/* * Globals */ body { font-family: Georgia, "Times New Roman", Times, serif; color: #555;} h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, h7, .h7 { 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;}感謝各位的閱讀，以上就是“怎么用bootstrap制作簡歷”的內容了，經過本文的學習后，相信大家對怎么用bootstrap制作簡歷這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
