前端：1小時搭建簡約漂亮的個人網站（Bootstrap）

1小時搭建簡約漂亮的個人網站（）

有一個搭建自己個人網站的想法，把自己的一些技術文章、日記、創業想法等等統統寄托在這里。

后臺前端統統來一套！

首先是前端！

先上這個長得好看的效果圖。

概述

目前為只完成了該頁面的UI開發，暫時沒有實現與后臺交互的功能。現在在學習ssm框架的搭建，爭取過年前搞定后臺的基本接口。然后把這個頁面的登錄、技術文章、隨手記與后臺交互的功能完成了。

希望各位可以去我的地址添個小星星☆，最新的額代碼會更新在這，哈哈。

Demo 地址

文章

文章也會分名為BG前端，BG后端兩個板塊，專門用于記錄該項目的問題；按進度更新文章。

苦水

一個開發者，搞這些有點吃力，不過很開心，把工作推到年后，現在可以安安心心學習一下，搞下自己想做的東西！

首先要入手的便是用了1天的時間學習的使用，第二天便實踐。

實踐開始 1.準備Jq、的所需要的材料

2.創建.html引進jq、文件

3.實現

3.1輪播圖：

代碼主要參照官網提供的示例，html代碼按排班分段給出、css、js代碼最后一起貼出

    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
            <li data-target="#carousel-example-generic" data-slide-to="1">li>
            <li data-target="#carousel-example-generic" data-slide-to="2">li>
            <li data-target="#carousel-example-generic" data-slide-to="3">li>
            <li data-target="#carousel-example-generic" data-slide-to="4">li>
            <li data-target="#carousel-example-generic" data-slide-to="5">li>
        ol>
        
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/ic_p4.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p5.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p6.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p7.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p8.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
            <div class="item">
                <img src="img/ic_p9.jpg">
                <p class="carousel-caption">
                    騎馬
                p>
            div>
        div>
        
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
            <span class="sr-only">Previousspan>
        a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
            <span class="sr-only">Nextspan>
        a>
    div>

3.2大功能塊

店鋪：放為了放我今年計劃開淘寶店商品的目錄，以及我喜歡的一些物品的連接。

紀念館：放一些階段性的具有意義的文章、照片等

私人角落：放日記、技術文章等

    <div class="row div_function">
        <div class="col-xs-4">
            <div class="panel panel-default" id="pFunc1">
                <div class="panel-body">
                    <strong>店鋪strong>
                    <img class="iv_function" src="img/ic_store.svg">
                div>
            div>
        div>
        <div class="col-xs-4">
            <div class="panel panel-default"  id="pFunc2">
                <div class="panel-body">
                    <strong>紀念館strong>
                    <img class="iv_function" src="img/ic_remeber.svg">
                div>
            div>
        div>
        <div class="col-xs-4">
            <div class="panel panel-default"  id="pFunc3">
                <div class="panel-body">
                    <strong>私人角落strong>
                    <img class="iv_function" src="img/ic_personal.svg">
                div>
            div>
        div>
    div>

3.3技術世界

這里是展示自己的技術文章，使用列表樣式

    <div class="container div_divider">
        
        <hr class="hr_1">Bigname Technology World !<hr class="hr_2">
        <div class="row">
            
            <div class="col-xs-9">
                <div class="list-group div_article">
                    
                    <a href="#" class="list-group-item active item_article_first">
                        <h4 class="list-group-item-heading">
                            My Life, Like Sun!
                        h4>
                    a>
                    
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設計理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android1.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設計理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android1.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設計理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android2.jpg">
                            div>
                        div>
                    div>
                    <div class="list-group-item item_article">
                        <div class="row">
                            <div class="div_center col-xs-9">
                                <div class="list-group-item-heading div_article_title">
                                    <strong>
                                        Android框架設計理念
                                    strong>
                                div>
                                <p class="list-group-item-text div_article_content">
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                    所有設計源于生活，框終點在于分層、層與層之間如何交流。
                                p>
                            div>
                            
                            <div class="col-xs-3 div_right_info">
                                <img class="iv_article img-rounded" src="img/ic_android3.jpg">
                                <div>2017/12/9 12:09div>
                            div>
                        div>
                    div>
                div>
            div>

3.4個人標簽、隨手記心情

            <div class="col-xs-3 div_record">
                
                <div class="jumbotron div_userinfo">
                    <img class="iv_user_head img-circle" src="img/ic_p5.jpg">
                    <div style="display: inline-block; margin-left: 12px;font-size: 18px;">梁世杰div>
                div>
                
                <div style="display: flex;">
                    <div style="flex: 1"><hr>div>
                    <div style="text-align: center;line-height: 48px;color: #34374C">記錄美好的心情div>
                    <div style="flex: 1"><hr>div>
                div>
                <input type="text" class="form-control" placeholder="標題:美好的一天...">
                <br>
                <textarea class="form-control" rows="3" name=textarea placeholder="內容:今天撿到一分錢！！！^_^">textarea>
                <br>
                <div class="div_save">
                    <button type="button" class="btn btn-primary btn_save_record">savebutton>
                div>
                <hr>
                
                <div class="row div_little_func">
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_login" data-toggle="modal" data-target="#loginModal">登button>
                    div>
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_stay">留button>
                    div>
                    <div class="col-xs-4">
                        <button class="btn btn-default btn-cricle btn_write">寫button>
                    div>
                div>
            div>
        div>

3.5登錄模態框

-- 登錄模態框 -->
        <div class="modal fade bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title" id="myModalLabel" style="text-align: center;">登錄div>
                    div>
                    <div class="modal-body">
                        
class="form-horizontal" style="padding: 12px;">
                            <div class="form-group">
                                "text" class="form-control" id="inputEmail3" placeholder="賬戶名">         
                            div>
                            <div class="form-group">            
                                "password" class="form-control" id="inputPassword3" placeholder="密碼">
                            div>
                        
                    div>
                    <div class="modal-footer" style="text-align: center;">
                        "button" class="btn btn-primary" style="width: 100%">Login
                    div>
                div>
            div>
        div>

各個效果的代碼如上，多看官網！沒有完成不了的事。同時說一下，jq也是第一次用，慶幸沒出現什么問題，這么簡單也不應該出現什么問題。~~(>_