如何用bootstrap製作履歷-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

如何用bootstrap製作履歷

爱喝马黛茶的安东尼

Jul 13, 2019 pm 05:55 PM

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>
        <h1 id="个人简历">个人简历</h1>
    </div>
    <div class="divContent container">
        <div>
            <h2 id="基本信息">基本信息</h2>
            <div>
                <blockquote>
                    <h2 id="某某">某某</h2>
                    <footer>XX工程师</footer>
                </blockquote>
                <div class="row text-center">
                    <img class="img-responsive img-circle 
                    img-thumbnail lazy"  src="/static/imghwm/default1.png"  data-src="./img/zmz.jpg"   alt="boy"  style="max-width:90%" >
                </div>
                <div class="row text-center">
                    <h3 id="个人介绍">个人介绍</h3>
                </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>
                    <h2 id="个人荣誉">个人荣誉</h2>
                    <hr>
                    <p2>获得******************************************</p2>
                    <h2 id="我的空间">我的空间</h2>
                    <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>
                    <h2 id="个人技能">个人技能</h2>
                    <hr>
                    <p>1.***************</p>
                    <p>2.***************</p>
                    <p>3.***************</p>
                    <p>4.***************</p>
                    <p>5.***************</p>
                </div>
            </div>
        </div>
        <div>
            <h2 id="职业技能">职业技能</h2>
 
            <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>
            <h2 id="项目展示">项目展示</h2>
            <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="/static/imghwm/default1.png"  data-src="./img/img1.jpg"  class="lazy"     style="max-width:90%" alt="第一张">
                            <div>项目 1</div>
                        </div>
                        <div>
                            <img src="/static/imghwm/default1.png"  data-src="./img/img2.jpg"  class="lazy"     style="max-width:90%" alt="第二张">
                            <div>项目 2</div>
                        </div>
                        <div>
                            <img src="/static/imghwm/default1.png"  data-src="./img/img3.jpg"  class="lazy"     style="max-width:90%" alt="第三张">
                            <div>项目 3</div>
                        </div>
                        <div>
                            <img src="/static/imghwm/default1.png"  data-src="./img/img4.jpg"  class="lazy"     style="max-width:90%" 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>
            <h2 id="请联系我">请联系我</h2>
            <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>

相關推薦：《bootstrap入門教學》

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&#39;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製作履歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：csdn。如有侵權，請聯絡admin@php.cn刪除

Bootstrap網格：如何適應移動設備？May 16, 2025 am 12:02 AM

Bootstrap的網格系統可通過以下步驟適配移動設備：1）使用col-xs-類定義元素在小屏幕上的跨度；2）簡化網格結構，避免過度嵌套；3）根據需要調整offset-xs-類以優化空間使用；4）利用order-*類重新排列元素順序；5）使用開發工具測試不同屏幕尺寸下的佈局，並關注性能優化。這樣可以確保網格系統在移動設備上提供最佳的查看體驗。

了解響應式網絡設計的引導網格系統May 14, 2025 am 12:07 AM

Bootstrap'SgridSemiteStemfiveDuetoIts12-columnlayOutAndResponsiveClasses，允許ForfforFlexibleanDmaintabainbabledesignsignsigns.toleverations.toleveration：1）userowsandcolumnswithclasseslikecol-md，col sm，col-lggfordforentscreenscreenscreens.2）

Bootstrap網格系統：響應迅速佈局的綜合指南May 13, 2025 pm 04:17 PM

BootstrapGridSemessentialForCreatingResponsivElayouts.1）ItuseScontainers，行，和ColumnSbasedona12-ColumnLaylayOut.2）cssflexboxandMediaqueriesensEnsureflexibilityAcrossscreenscreensacribilityAcrosscreensacrizes.3）classLikeCol-XSSLLIKECOL-XSSLIKECOL-XM，COLIKECOL-XM，COL-SM，COLCHANGCHANGCHANGCHENSCHENTCHESCHEN.4）

Bootstrap：所解釋的應用和優勢May 10, 2025 am 12:18 AM

Bootstrap是一個前端框架，用於快速構建響應式網站。其優勢包括：1.快速開發：利用預定義樣式和組件。 2.一致性：提供統一設計風格。 3.響應式設計：內置網格系統適應各種設備。通過CSS類和JavaScript插件，Bootstrap簡化了網頁開發過程。

Bootstrap：簡化響應式Web開發May 09, 2025 am 12:13 AM

Bootstrap簡化開發流程主要通過其柵格系統、預定義組件和JavaScript插件。 1.柵格系統允許靈活佈局，2.預定義組件如按鈕和導航欄簡化樣式設計，3.JavaScript插件增強交互功能，提升開發效率。

Bootstrap：響應式Web設計的關鍵May 08, 2025 am 12:24 AM

Bootstrap是由Twitter開發的開源前端框架，提供了豐富的CSS和JavaScript組件，簡化了響應式網站的構建。 1)其網格系統基於12列佈局，通過類名控制元素在不同屏幕尺寸下的顯示。 2)組件庫包括按鈕、導航欄等，易於定制和使用。 3)工作原理依賴於CSS和JavaScript文件，需注意處理依賴關係和样式衝突。 4)使用示例展示了基本和高級用法，強調了自定義功能的重要性。 5)常見錯誤包括網格系統計算錯誤和样式覆蓋，需使用開發者工具調試。 6)性能優化建議只引入必要組件，使用預處理器定製樣

Bootstrap：一個強大的Web設計框架May 07, 2025 am 12:05 AM

Bootstrap是一個開源的前端框架，由Twitter團隊開發，旨在簡化和加速網頁開發過程。 1.Bootstrap基於HTML、CSS和JavaScript，提供了豐富的組件和工具，用於創建現代化的用戶界面。 2.它的核心在於響應式設計，通過預定義的類和組件實現各種佈局和样式。 3.Bootstrap提供了預定義的UI組件，如導航欄、按鈕、表單等，易於使用和調整。 4.使用示例包括創建簡單的導航欄和高級的可折疊側邊欄。 5.常見錯誤包括版本衝突、CSS覆蓋和JavaScript錯誤，可通過版本管理工具