گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/15 - 11:58
كد :7100
به کمک Bootstrap به راحتی می توانیم یک Layout با چندین ستون را ایجاد کنیم.
Bootstrap یک سیستم شبکه بندی 12 ستونه و واکنش گرا به موبایل را ارائه می دهد.
هنگامی که ستون ها در صفحه های نمایش مختلف نشان داده می شوند،مجددا خود را تنظیم می کنند.
برخی از قواعد شبکه بندی
- با یک container شروع کنید (<"div class="container>)
- یک سطر داخل آن ایجاد کنید <"div class="row>
- از کلاس های از پیش تعریف شده مانند col-md-4. ، col-md-6. و ... استفاده کنید تا به سرعت ستون های شبکه بندی را ایجاد کنید.
- ستون های شبکه بندی با مشخص کردن 12 ستون قابل گسترش ایجاد می شوند، به عنوان مثال برای ایجاد سه ستون مساوی می توانید از کلاس col-md-4. استفاده کنید.
- تعداد کلاس های *-*-col. باید مجموعا 12 عدد در هر سطر باشد.
- محتوا داخل ستون های شبکه بندی قرار می گیرد.
مثال زیر نشان می دهد که چگونه می توانیم یک layout با چهار ستون مساوی را ایجاد کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="col-md-3">
<p><strong>Note: On a large screen the content will be displayed as a four-column layout. (Just enlarge the browser window to see the effect). However, the content will automatically adjust itself into a single-column layout on a small screen. So, with Bootstrap, our page is now responsive to the screen size and adjusts itself accordingly.</strong></p>
</div>
</div>
</div>
</body>
</html>
ستون ها با عرض های متفاوت
اکنون می خواهیم ستون هایی با عرض های متفاوت را ایجاد کنیم.
مثال زیر یک layout سه ستونه ایجاد می کند که ستون وسط، نسبت به ستون اول و آخر، پهن تر می باشد:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-6">
<p><strong>Note: On a large screen the content will be displayed as a three-column layout. (Just enlarge the browser window to see the effect). However, the content will automatically adjust itself into a single-column layout on a small screen. So, with Bootstrap, our page is now responsive to the screen size and adjusts itself accordingly.</strong></p>
</div>
<div class="col-md-3">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>