layouts
<div class="navbar bg-black none-radius">
<div class="container">
<div class="text-gray navbar-header margin-top-2 margin-bottom-2 ">
<h2 class="none-margin">Basic 88</h2>
<p> Free Html Website</p>
</div>
<ul class="nav navbar-nav navbar-right bg-bold-black special-menu margin-top-3 ">
<li > <a class="text-gray" href="#"> item1</a></li>
<li > <a class="text-gray" href="#"> item1</a></li>
<li > <a class="text-gray" href="#"> item1</a></li>
<li > <a class="text-gray" href="#"> item1</a></li>
<li > <a class="text-gray" href="#"> item1</a></li>
<li > <a class="text-gray" href="#"> item1</a></li>
</ul>
</div>
</div>
burdaki mavi ile işaretli olanlar bizim yazdıgımız style dosyasındaki özellikler.
style.css
.bg-bold-black{
background-color: #232323
}
.special-menu{
margin-top: 27px;
}
.margin-top-3{
margin-top: 30px !important;
}
.margin-top-2{
margin-top: 20px !important;
}
.text-gray {
color: #D4D4D4
}
.none-radius{
border-radius: 0 !important;
}
.bg-black{
background-color: #333333
}
.special-menu a:hover{
color: #c41435;
background: none !important
}
.padding-full-1{
padding: 10px !important;
}
.pull-top-1{
margin-top: -10px !important;
}
layouts a style dosyasını verelim.
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
colon sistemi içinse şu örneği yapalım:
<div class="container">
<div class="row margin-top-2">
<div class="col-sm-3">
<h2 class="text-muted btn-success padding-full-1 ">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</div>
<div class="col-sm-3">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</div>
<div class="col-sm-3">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</div>
<div class="col-sm-3">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p></div>
<div class="col-sm-2">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini
</p></div>
<div class="col-sm-2">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini
</p></div>
<div class="col-sm-2">
<h2 class="text-muted btn-success padding-full-1">Lorem</h2>
<p class="none-radius well text-justify pull-top-1">
L Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini
</p></div>
</div>
</div>
