How to learn code with html and css bootstrap to create template website?
How to learn code with html and css bootstrap to
create template website?
Video :
3.
Upzip file and
rename folder or not the same than copy it go to your folder project
and past
it in your project,
4.
Open file
index.html with Which Text-Editor that you have on your local computer.
5.
Write the code :
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
6.
Create file style.css for write your class or id style that you want
to write:
7.
Link file css
into file index.html
<head>
<title>Template</title>
<link rel="stylesheet"
type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet"
type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
type="text/css"
href="bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet"
type="text/css"
href="bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet"
type="text/css" href="bootstrap/css/style.css">
</head>
8.
This blog code on
Body:
<body>
<div
class="container">
<!-- header -->
<div class="row
thumbnail">
<div
class="col-md-2">
<img
src="images/logo.jpg" class="logo">
</div>
<div
class="col-md-10">
<img
src="images/header.jpg" class="advertise">
</div>
</div>
<!-- Menu navigation -->
<div class="row
thumbnail">
<ul>
<li
class="btn btn-defualt"><a
href="">Home</a></li>
<li
class="btn btn-defualt"><a
href="">Video</a></li>
<li
class="btn btn-defualt"><a
href="">Image</a></li>
<li
class="btn btn-defualt"><a
href="">Contact</a></li>
<li
class="btn btn-defualt"><a href="">About
Us</a></li>
</ul>
</div>
<!-- blog advertise -->
<div class="row ">
<div
class="col-md-3 thumbnail ">
<img
src="images/leftadvertise.jpg" class="imgadv_left">
</div>
<div
class="col-md-6 thumbnail ">
<img
src="images/centeradvertise.jpg" class="imgadv_center">
</div>
<div
class="col-md-3 thumbnail ">
<img
src="images/rightadvertise.jpg" class="imgadv_right">
</div>
</div>
<!-- blog content -->
<div class="row ">
<!-- blog content left -->
<div class="col-md-8
thumbnail">
Content left
</div>
<!-- blog content right -->
<div
class="col-md-4 thumbnail">
<div
class="col-md-12">
<h4>Catagory</h4>
<div
class="col-md-12 thumbnail">
Detail
</div>
</div>
<div
class="col-md-12">
<h4>News</h4>
<div
class="col-md-12 thumbnail">
Detail
</div>
</div>
<div
class="col-md-12">
<h4>Advertise</h4>
<div
class="col-md-12 thumbnail">
Detail
</div>
</div>
</div>
</div>
<!-- blog footer -->
<div class="row
thumbnail">
<div
class="col-md-3">
footer left
</div>
<div
class="col-md-9">
footer right
</div>
</div>
</div>
</body>
9.
Run file index.html on
the browser
This link project on git for free : https://github.com/soksopheak377/HTML_CSS_project
Thank you
for watch this video and don’t forgot like comment share and subscript this
video !
How to learn code with html and css bootstrap to create template website?
Reviewed by soksopheak
on
8:57 PM
Rating:
Reviewed by soksopheak
on
8:57 PM
Rating:
No comments: