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

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

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

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.