Build such a simple and beautiful personal website (Bootstrap) in 1 hour.

There is an idea to build their own personal website, some of their own technical articles, diaries, entrepreneurial ideas and so on all pinned here.

Backstage front end all come a set!

First, the front end!

Let’s start with this nice looking rendering.

An overview of the

At present, only the UI development of this page has been completed, and the function of interaction with the background has not been realized temporarily. Now I am learning the construction of SSM framework and trying to finish the basic interface of the background before the New Year. Then the login of this page, technical articles, with the background interaction with the completion of the function.

I hope you can go to my github address to add a small star ☆, the latest code will be updated here, ha ha. The Demo making address

The article

The paper will also be divided into two sections named BG front end and BG back end, which are specially used to record the problems of the project. Update the article as it progresses.

The bitter

As an Android developer, it is a little difficult to do these things, but I am very happy. I have put off my work until the New Year. Now I can learn and do what I want to do in peace! First, I learned how to use bootstrap for one day and practiced it the next day.

The practice started

1. Prepare materials required for Jq and BootStrap

2. Create index. HTML and import jQ and bootstrap files



3. The implementation

3.1 Rote diagram

The codes mainly refer to the examples provided on the official website of Bootstrap. The HTML codes are given in sections according to the schedule, and the CSS and JS codes are posted together at the end

<! -- Picture rotation --> <! -- dot --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <! -- Indicators --> <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="item active"> <img SRC ="img/ic_p4.jpg"> <p Class ="carousel-caption"> </p> <div > <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" > riding < / p > < / div > < div class = "item" > <img SRC ="img/ IC_p7.jpg "> <p class="carousel-caption"> </p> <div class="item"> <img SRC ="img/ IC_p8.jpg "> <p Class ="carousel-caption"> Horse </p> </div> <div class="item"> <img SRC ="img/ic_p9.jpg" </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">Previous</span> </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">Next</span> </a> </div>Copy the code
3.2 Large function blocks

Store: Put in order to put my plan to open taobao store this year catalog, as well as some of my favorite items. Memorial hall: put some periodical meaningful articles, photos and other private corners: put diaries, technical articles and so on

<! <div class="row div_function"> <div class=" col-XS-4 "> <div class="panel panel-default" id="pFunc1" <img class="iv_function" SRC ="img/ic_store.svg"> </div> </div> </div> </div> <div Class =" col-XS-4 "> <div class="panel panel-default" id="pFunc2"> <div class="panel-body"> <strong> Museum </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> private corner </strong> <img class="iv_function" src="img/ic_personal.svg"> </div> </div> </div> </div>Copy the code
3.3 Technology World

Here is a technical article showing you, using the Bootstrap list style

<! <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="row"> <div class="div_center col-XS-9 "> <div class="div_center col-XS-9" Class ="list-group-item-heading div_article_title"> <strong> Android framework </strong> </div> <p Class ="list-group-item-text div_article_content"> All design comes from life, and the end of the frame is how layers and layers communicate. </p> </div> <! -- Picture on the right, <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 framework </strong> </div> <p Class ="list-group-item-text div_article_content"> All design comes from life, and the end of the frame is how layers and layers communicate. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. </p> </div> <! -- Picture on the right, <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 framework </strong> </div> <p Class ="list-group-item-text div_article_content"> All design comes from life, and the end of the frame is how layers and layers communicate. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. </p> </div> <! -- Picture on the right, <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 framework </strong> </div> <p Class ="list-group-item-text div_article_content"> All design comes from life, and the end of the frame is how layers and layers communicate. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. All design comes from life, and the end of the frame lies in how layers and layers communicate with each other. </p> </div> <! -- Picture on the right, <div class=" col-xS-3 div_right_info"> <img class="iv_article img-rounded" SRC ="img/ic_android3.jpg"> <div>2017/12/9 12:09</div> </div> </div> </div> </div> </div>Copy the code
3.4 Personal label, easy to remember mood
<! <div class=" col-xS-3 div_record"> <! <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; <div > <div style="flex: 1"><hr></div> </div> <input type="text" class="form-control" placeholder=" title: a nice day... > <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">save</button>  </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"> log </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-stay" </button> </div> </div> </div>Copy the code
3.5 Logging in to the Modal Box

<! <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 class="modal-body"> <form class="form-horizontal" style=" padding-right: 12px; > <div class="form-group"> <input type="text" class="form-control" id="inputEmail3" placeholder=" account name "> </div> <div Class ="form-group"> <input type="password" class="form-control" id="inputPassword3" placeholder=" password" > </div> </form> </div> <div class="modal-footer" style="text-align: center;" > <button type="button" class="btn btn-primary" style="width: 100%">Login</button> </div> </div> </div> </div>Copy the code

Each effect code above, see the bootstrap official website! Nothing is impossible. At the same time, JQ is also the first time to use, fortunately there is no problem, so simple should not be any problem. ~~(>_<) ~~ I learned HTML + CSS + JS for a month, and then I learned Vue and Ionic frameworks, so I learned them backwards. Haha. But it doesn’t matter.