如何用bootstrap制作简历-Tutorial Bootstrap-php.cn

Rumah

hujung hadapan web

Tutorial Bootstrap

如何用bootstrap制作简历

爱喝马黛茶的安东尼

Jul 13, 2019 pm 05:55 PM

bootstrap

如何用bootstrap制作简历

1563010991(1).png

1563011009(1).png

注意：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>个人简历</h1>
    </div>
    <div class="divContent container">
        <div>
            <h2>基本信息</h2>
            <div>
                <blockquote>
                    <h2>某某</h2>
                    <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">
                    <h3>个人介绍</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>个人荣誉</h2>
                    <hr>
                    <p2>获得******************************************</p2>
                    <h2>我的空间</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>个人技能</h2>
                    <hr>
                    <p>1.***************</p>
                    <p>2.***************</p>
                    <p>3.***************</p>
                    <p>4.***************</p>
                    <p>5.***************</p>
                </div>
            </div>
        </div>
        <div>
            <h2 id="skill">职业技能</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>项目展示</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="./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>
            <h2>请联系我</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;
}

Atas ialah kandungan terperinci 如何用bootstrap制作简历. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:csdn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Tujuan Bootstrap: Membina laman web yang konsisten dan menarikApr 19, 2025 am 12:07 AM

Tujuan utama bootstrap adalah untuk membantu pemaju dengan cepat membina laman web responsif, mudah alih pertama. Fungsi terasnya termasuk: 1. Reka bentuk responsif, yang menyedari pelarasan susun atur peranti yang berbeza melalui sistem grid; 2. Komponen yang telah ditetapkan, seperti bar navigasi dan kotak modal, memastikan estetika dan keserasian penyemak imbas; 3. Penyesuaian dan penyambungan sokongan, dan gunakan pembolehubah sass dan campuran untuk menyesuaikan gaya.

Bootstrap vs Rangka Kerja Lain: Gambaran Keseluruhan PerbandinganApr 18, 2025 am 12:06 AM

Bootstrap lebih baik daripada Tailwindcss, Yayasan, dan Bulma kerana mudah digunakan dan cepat mengembangkan laman web responsif. 1.Bootstrap menyediakan perpustakaan yang kaya dengan gaya dan komponen yang telah ditetapkan. 2. Perpustakaan CSS dan JavaScript menyokong reka bentuk responsif dan fungsi interaktif. 3. Sesuai untuk pembangunan pesat, tetapi gaya tersuai mungkin lebih rumit.

Mengintegrasikan Gaya Bootstrap dalam Reaksi: Kaedah dan TeknikApr 17, 2025 am 12:04 AM

Mengintegrasikan bootstrap dalam projek React boleh dilakukan dalam dua cara: 1) diperkenalkan menggunakan CDN, sesuai untuk projek kecil atau prototaip cepat; 2) Pemasangan menggunakan Pengurus Pakej NPM, sesuai untuk senario yang memerlukan penyesuaian yang mendalam. Dengan kaedah ini, anda dapat dengan cepat membina antara muka pengguna yang indah dan responsif dalam React.

Bootstrap dalam React: Kelebihan dan Amalan TerbaikApr 16, 2025 am 12:17 AM

Kelebihan mengintegrasikan bootstrap ke dalam projek bertindak balas termasuk: 1) perkembangan pesat, 2) konsistensi dan penyelenggaraan, dan 3) reka bentuk responsif. Dengan secara langsung memperkenalkan fail CSS atau menggunakan Perpustakaan React-Bootstrap, anda boleh menggunakan komponen dan gaya Bootstrap dengan cekap dalam projek React anda.

Bootstrap: Panduan Cepat untuk Rangka Kerja WebApr 15, 2025 am 12:10 AM

Bootstrap adalah rangka kerja yang dibangunkan oleh Twitter untuk membantu dengan cepat membina laman web dan aplikasi yang responsif, mudah alih. 1. Kemudahan penggunaan dan perpustakaan komponen yang kaya membuat pembangunan lebih cepat. 2. Komuniti yang besar menyediakan sokongan dan penyelesaian. 3. Memperkenalkan dan menggunakan nama kelas untuk mengawal gaya melalui CDN, seperti membuat grid responsif. 4. Gaya yang disesuaikan dan komponen lanjutan. 5. Kelebihan termasuk pembangunan pesat dan reka bentuk responsif, sementara kelemahan adalah konsistensi gaya dan keluk pembelajaran.

Memecahkan bootstrap: apa itu dan mengapa pentingApr 14, 2025 am 12:05 AM

BootstrapisaFree, Open-SourcecssFrameworkTheatSimplifiesResponsiveandMobile-Firstwebsitedevelopment.itofferspre-styledcomponentsandagridsystem, streamliningthecreationofaestheticallypleasingandfunctionalwebdesigns.

Bootstrap: Membuat reka bentuk web lebih mudahApr 13, 2025 am 12:10 AM

Apa yang menjadikan reka bentuk web lebih mudah ialah bootstrap? Komponen pratetapnya, reka bentuk responsif dan sokongan komuniti yang kaya. 1) perpustakaan dan gaya komponen preset membolehkan pemaju untuk mengelakkan menulis kod CSS kompleks; 2) Sistem grid terbina dalam memudahkan penciptaan susun atur responsif; 3) Sokongan komuniti menyediakan sumber dan penyelesaian yang kaya.

Impak Bootstrap: Mempercepat Pembangunan WebApr 12, 2025 am 12:05 AM

Bootstrap mempercepatkan pembangunan web, dan dengan menyediakan gaya dan komponen yang telah ditetapkan, pemaju dapat dengan cepat membina laman web responsif. 1) Ia memendekkan masa pembangunan, seperti melengkapkan susun atur asas dalam masa beberapa hari dalam projek. 2) Melalui pembolehubah sass dan campuran, bootstrap membolehkan gaya tersuai memenuhi keperluan khusus. 3) Menggunakan versi CDN dapat mengoptimumkan prestasi dan meningkatkan kelajuan pemuatan.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Dreamweaver Mac版

Alat pembangunan web visual

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7569

Tutorial CakePHP

1386

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

107

Tunjukkan Lagi