اگر شما یک طراح قالب نیستید ، و یا اینکه هنوز اطلاعات زیادی در این زمینه ندارید ، می توانید از مدل html برای جوملا 3
که توسط فریم ورک bootstrap ایجاد شده است استفاده کنید .(ورژن 2.3.2 از bootstrap برابر با جوملا 3 است ).
شما می توانید این مدل را از اینجا دانلود کنید
فایل بالا را دانلود کنید و آن را در یک فولدر جدید unzip کنید .
در عکس زیر ساختار فایل ها و فولدر ها را می بینید :
هنگامی که فایل index.html را باز می کنید (در مرورگر) شما قالب آماده ای را می ببینید .
عکس زیر یک نمایش از آن قالب در اندازه ی صفحه ی 1024 پیکسل است .
هدف این قالب تمرین کردن با کلاس های bootstrap و ساختار آن است .
همچنین از اهداف دیگر آن ساختن سایت شما است که در آینده به قالب جوملا تبدیل خواهد شد .
ما در ابتدا نگاهی به ساختار css و html از فایل index.httml می اندازیم .
سی اس اس هاب قالب که در فایل css/template.css قرار دارند .
در فایل template.css تنها یک تعریف(کد) وجود دارد .دیگر تعریف(کد) ها به وسیله ی bootstrap انجام می شود .
Title
body {
padding-top: 60px;
padding-bottom: 40px;
}
ساختار فایل index.html
index.html را از فایلی که دانلود کردید باز کنید(مدل html از bootstrap).
تشریح قسمت head از فایل باز شده
در قسمت head از این فایل می توان تگ های متا و اسکریپت ها و لینک به فتیل های css را دید .
ما فعلا نمی خواهیم به قسمت head بپردازیم . در آموزش بعدی می توانید توضیح این کد ها را بیابید .
نوار هدایتی(navigation bar) در بالای وبسایت
Title
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Example Template Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<ul/>
<li/>
<ul/>
</div><!-- nav-collapse -->
</div><!-- container -->
</div><!-- navbar inner -->
</div><!-- navbar -->
این نوع از نوار هدایتی بارها و بارها در وبسایت ها استفاده شده اند ،
کلاس navbar کلاسی است که در bootstrap ایجاد شده است . در div که کلاس navbar در آن قرار دارد کلا سه کلاس زیر قرار دارد:
1. خود کلاس navbar
2.کلاس navbar-inverse
3.navbar-fixed-top
در قسمت نوار هدایت اگر کلاس navbar-inverse را حذف کنید ، پس زمینه ی با رنگ سیاه در قسمت نوار هدایت از بین می رود .
ما تنها کلاس navbar-inverse را حذف می کنیم ، و می بینید که در ظاهر نوار هدایتی چه تفاوتی حاصل خواهد شد :
رنگ آن از تیره به سفید تغییر کرده است .
همان طور که می بینید . عرض نوار هدایت تمام صفحه را از چپ تا راست گرفته است ، اگر بخواهیم می توانیم عرض
نوار هدایتی را کوچکتر کنیم تا به اندازه ی عرض محتویات صفحه شود .
برای این کار باید div با کلاس container را بیرون از همه ی div ها قرار دهیم و کلاس های navbar-inverse و
navbar-fixed-top را حذف کنیم . بعد از انجام این کارها فایل اچ تی ام ال ما بصورت زیر خواهد شد :
Title
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Example Template Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<"li class="dropdown>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<ul/>
</li>
<ul/>
</div><!-- nav-collapse -->
</div><!-- navbar inner -->
</div><!-- navbar -->
</div><!-- container -->
در فایل template.css مقدار paddind-top را که در body تعریف شده است به 10px تغییر دهید . صفحه ی ما و نوار هدایتی بصورت
زیر خواهد شد :
شما می توانید ساختار نوار هدایتی را هر جور که می خواهید تغییر دهید و کلاس های آن را دستکاری کنید .
در ادامه ی این مقاله : مقاله ی ایجاد نوار هدایتی با منوهای کرکره ای را مطالعه کنید .
