سبد (0)

ایجاد یک مدل html در bootstrap

اگر شما یک طراح قالب نیستید ، و یا اینکه هنوز اطلاعات زیادی در این زمینه ندارید ، می توانید از مدل 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  تغییر دهید . صفحه ی ما و نوار هدایتی بصورت 

زیر خواهد شد : 

 

شما می توانید ساختار نوار هدایتی را هر جور که می خواهید تغییر دهید  و کلاس های آن را دستکاری کنید . 

در ادامه ی این مقاله : مقاله ی ایجاد نوار هدایتی با منوهای کرکره ای را مطالعه کنید .

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه