Hướng dẫn thiết kế Website bằng Bootstrap Responsive (Phần 2)

• Trình duyệt FireFox
• Addon FireBug
• Bộ công cụ Bootstrap Twitter
• Phần mềm Notepad++

Ảnh Demo – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

• Top
• Menu
• Slider
• Main
• Footer
• Copyright

Code Logo – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

<div id=”top”>
<a href=”index.html” title=”Home”><img src=”images/logo.png” alt=”” /></a>
</div>

Code Menu – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

<div id=”menu”>
<nav class=”navbar navbar-default” role=”navigation”>

<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>HOME</a>
</div>

<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>SERVICE</a></li>
<li><a href=”#”>EMPLOYEES</a></li>
<li><a href=”#”>ABOUT</a></li>
<li><a href=”#”>CONTACT</a></li>
</ul>
<form class=”navbar-form navbar-right” role=”search”>
<div class=”form-group”>
<input type=”text” class=”form-control”>
</div>
</form>

</div>
</nav>
</div>

Kết quả Menu như sau

Kết quả Menu – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

CSS Menu – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

body{margin:0px; padding:0px; width:100%; background: none repeat scroll 0 0 #1E2329;}
ul {list-style: none outside none; margin:0; padding:0;}
ul li {display: inline-block;}
h1, h2, h3, h4, h5, h6{}
a {text-decoration: none;}
.navbar-default{background: #31363C;}
.nav.navbar-nav a {
color: #999999 !important;
font-size: 15px;
font-weight: bold;
}
.navbar {
border: medium none;
margin-bottom: 0;
}
.navbar-nav > li {
border-right: 1px solid #454950;
float: left;
}

Code Slider – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

Kết quả Slider – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

Code Main – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

<div id=”main”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”main_inner”>
<h3>Built for WordPress 3.</h3>
<p>Embrace change. WordPress 3 is here and a revolution has begun. Take advantage of the power of WordPress 3 with the all new Complexity Premium WordPress theme.</p>
<img src=”images/product1.png” alt=”” />
</div>
</div>
<div class=”col-md-4″>
<div class=”main_inner”>
<h3>It couldn’t be more simple.</h3>
<p>Complexity is everything it’s name isn’t – simple. This premium WordPress theme will have your website up and running on the Internet before you know it.</p>
<img src=”images/product2.png” alt=”” />
</div>
</div>
<div class=”col-md-4″>
<div class=”main_inner”>
<h3>A true premium 8 in 1.</h3>
<p>Complexity comes with eight unique styles, each handcrafted with an immense amount of detail. Flip between each style with ease through your WP admin panel.</p>
<img src=”images/product3.png” alt=”” />
</div>
</div>
</div>
</div>

#main {
background: none repeat scroll 0 0 #fff;
display: inline-block;
width: 100%;
}
.row {
margin-left: 0;
margin-right: 0;
}
.main_inner {
padding: 0 10px;
}
.main_inner h3 {
color: #474747;
font-size: 17px;
font-weight: bold;
}
.main_inner > p {
color: #474747;
float: left;
font-size: 13px;
line-height: 25px;
width: 100%;
}
.main_inner img {
border: 1px solid #c7c7c7;
border-radius: 5px;
display: inline-block;
padding: 5px;
width: 100%;
}

Code Footer – Hướng dẫn thiết kế Website bằng Bootstrap Responsive

<div id=”footer”>
<div class=”row”>
<div class=”col-md-3″>
<h3>From the Blog</h3>
<ul>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class=”col-md-3″>
<h3>From the Portfolio</h3>
<ul>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
<li class=”arrow”>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class=”col-md-3″>
<h3>From Twitter</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
<li>2 days ago</li>
<li><a href=”#” title=”Follow Us!”>Follow Us!</a></li>
</ul>
</div>
<div class=”col-md-3″>
<h3>Get in Touch</h3>
<ul>
<li class=”phone”>1-800-555-5555</li>
<li class=”mail”>you@yoursite.com</li>
<li class=”contact”>Contact Form</li>
<li class=”skype”>YourSkypeUserID</li>
<li class=”link”>
<ul>
<li><img src=”images/rss.png” alt=”rss” /></li>
<li><img src=”images/twitter.png” alt=”twitter” /></li>
<li><img src=”images/facebook.png” alt=”facebook” /></li>
<li><img src=”images/myspace.png” alt=”myspace” /></li>
<li><img src=”images/flick.png” alt=”flick” /></li>
<li><img src=”images/linkin.png” alt=”linkin” /></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

#footer {
background: url(“../images/footer-col-bg.png”) repeat-x scroll 0 0 #191c21;
}
#footer h3 {
color: #a7a7a7;
font-size: 15px;
font-weight: bold;
}
.form-control {
background: url(“../images/search.png”) no-repeat scroll right center rgba(0, 0, 0, 0);
border: 1px solid #080d13;
width: 250px !important;
}
.arrow {
background: url(“../images/arrow.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
color: #a7a7a7;
padding-left: 10px;
width: 100%;
}
#footer li {
color: #a7a7a7;
margin: 5px 0 0;
width: 100%;
}
#footer li a{color: #fff;}
.phone {
background: url(“../images/phone.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
padding-left: 20px;
}
.mail {
background: url(“../images/mail.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
padding-left: 20px;
}
.contact {
background: url(“../images/contact.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
padding-left: 20px;
}
.skype {
background: url(“../images/skype.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
padding-left: 20px;
}
.link {
background: url(“../images/link.png”) no-repeat scroll left center rgba(0, 0, 0, 0);
padding-left: 20px;
}
.link li {
display: inline;
padding: 0 2px;
}

<div id=”copyright”><span>©2014 Complexity HTML Theme – Web Design by <a href=”https://thaomarky.com” title=”Thao Marky”>Thao Marky</a>’s Productions</span> </div>

#copyright {
background: url(“../images/footer-bg.png”) repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 55px;
padding: 15px 0;
text-align: center;
width: 100%;
}
#copyright span {
color: #969696;
}

@media only screen and (min-width:961px){
.container{width:960px; padding: 0;}
}

• Thiết kế Web
• Thiết Kế Web chuẩn SEO
• Thiết kế Web sử dụng Bootstrap
• Thiết kế Web sử dụng Responsive
• Hướng dẫn thiết kế Web bằng Responsive
• Hướng dẫn thiết kế Web sử dụng Responsive
• Hướng dẫn thiết kế Web bằng Bootstrap
• Lập trình Web
• Thiết kế web giao diện Mobile
• Bootstrap
• Bootstrap là gì?
• Bootstrap Twitter
• Bootstrap Twitter là gì?
• Responsive là gì?
• Hướng dẫn sử dụng Bootstrap Twitter
• Hướng dẫn thiết kế website sử dụng Responsive
• Thiết kế web theo mọi trình duyệt di động