Using angular cli and bootstrap to make a simple web page, I am a novice, but I can ignore it when I see it. If you don't like it, don't spray it!
The big premise: the basic tools should be ready
First install a linux system on the computer. I installed Ubuntu 14.04. After installing the system, you must first install the Sogou input method; install sublime text and the required plug-ins; secondly, you must install a Google browser, npm, node, angualr cli, bootstrap
Start the experiment with:
1 Create the project my-app and open it with sublime text.
Type the command in the terminal:
$ ng new my-app
After the creation is successful, run the project again:
$ ng serve
Type subl on the terminal and drag the project folder into it
2 Edit html5 on app.component.html to confirm the components of the web page
Tip: This is just a static web page!
Before editing a web page, you need to know that the web page you want to do consists of several parts, and then write code for the object.
For example: The web page I want to do is composed of sidebar, bottom, body, to achieve basic functions:
1 Like and share in the sidebar
2 Carousel at the bottom, like, share, favorite, comment, return to the top
If you still have the ability, you can get navigation, dynamic animation embedding, etc....
Then start writing code on app.component.html.
3 Problems encountered in editing and solutions
a. Realize the function of liking and collecting in the sidebar
Call the font icon in bootstrap to achieve
See the link for details http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
b. Import of text
When entering pictures in the text, be careful about the path expression of the picture, the expression of relative path and absolute path
Secondly, the pictures are recommended to be saved in the asset/imgs folder
c. Bottom carousel item
Just call the carousel in bootstrap
See the link for details: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
d. The function of returning to the top
在<head>中写上<header class="bs-docs-nav navbar navbar-static-top" id="top">
Write in <body>
<div style="position:fixed; bottom:0; right:0; width:100px;
color:#282828">
<a href="#top" class="back-to-top"> 返回顶部
</a>
</div>
Just
e. How to write text on pictures
add the following
<style type="text/css">
#div1{
position: relative;
width: 265px;
height: 100px;
}
#img1{
width: 100%;
height: 100%;
}
#span1{
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
text-align: center;
font-size: 18px;
color: #272822;
}
</style>
Just add the corresponding tag in <body>, for example
<div id="div1">
<span id="span1" ><strong>流川枫</strong> </span>
<img id="img1" src ="assets/imgs/cdd5a18ef1607fc90f6086bb4897bd8b.jpg" alt="First slide" class="img-thumbnail" >
</div>
4 Save the changes, re-run, you can see the web page you made