با سلام خدمت شمادوستان عزیز امیدوارم که خوب باشید،در این آموزش فراخواهید گرفت که با استفاده از Twitter Bootstrap چگونه لی اوت ثابت ایجاد کنید.
ایجاد لی اوت ثابت با استفاده از تویتر بوت استرپ
با ۳ Twitter Bootstrap می توانید لی اوت هایی از صفحات وب بر اساس تعداد پیکسل ثابت ایجاد کنید، به هرحال این بار برخلاف ورژن قبل از همان ابتدا responsive می باشد، طوریکه شما باید روش responsive را وارد کنید تا آن را برای دیگر دستگاه ها نیز responsive کنید. فرایند ایجاد لی اوت ثابت و در عین حال responsive با گروه .container آغاز می شود. پس از آن ردیف هایی را با گروه .row ایجاد کنید تا گروه های افقی مربوط به ستون ها را پوشش دهید. ردیف ها برای هم ترازی و لایه گذاری درست باید در داخل یک .container قرار بگیرند. ستون های بیشتری با استفاده از گروه های گرید از پیش تعریف شده مانند .col-xs-*، .col-sm-*، .col-md-* و .col-lg-*می توانند در داخل ردیف ها ایجاد شوند، که * نمایشگر شماره ی گرید می باشد و باید از ۱ تا ۱۲ باشد.
نکته:
محتوای حقیقی مانند متن، تصاویر، فیلم ها و غیره باید در داخل ستون ها قرار بگیرند و تنها هستند که می توانند زیرمجموعه ی بی واسطه ی ردیف ها باشند.
کد زیر یک لی اوت responsive با عرض ثابت ایجاد می کند که عرض آن روی دستگاه های کوچک دارای صفحه ای به عرض ≥۷۶۸px مانند تبلت، ۷۵۰px می باشد، در حالیکه عرض آن روی دستگاه های متوسط مانند دسک تاب و لب تاب دارای صفحه ای به عرض ≥۹۹۲pxعدد ۹۷۰px می باشد و روی دستگاه های بزرگتر با صفحه ای به عرض ≥۱۲۰۰pxدارای عرض ۱۱۷۰px می باشد. به هرحال عرض لی اوت به طور خودکار برای دستگاه هایی با عرض <768pxمانند تلفن های همراه، به طور خودکار محاسبه می شود.
مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
Twitter Bootstrap 3 Fixed Layout Example
<script src=”http://code.jquery.com/jquery.min.js” type=”text/javascript”><!–mce:0–></script>
<script src=”/Administrator/js/bootstrap.min.js” type=”text/javascript”><!–mce:1–></script>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”container”>
<div class=”navbar-header”>
<button class=”navbar-toggle”>
<span class=”sr-only”>Toggle navigation</span>
</button>
<a class=”navbar-brand” href=”#”>Tutorial Republic</a>
</div>
<!– Collect the nav links، forms، and other content for toggling –>
<div id=”navbarCollapse” class=”collapse navbar-collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”http://www.tahlildadeh.com” target=”_blank”>Home</a></li>
<li><a href=”http:// www.tahlildadeh.com” target=”_blank”>About</a></li>
<li><a href=”http:// www.tahlildadeh.com” target=”_blank”>Contact</a></li>
</ul>
</div>
</div>
<div class=”container”>
<div class=”jumbotron”>
<h1>Learn to Create Websites</h1>
<p>In today’s world internet is the most popular way of connecting with the people. At <a target=”_blank”>tutorialrepublic.com</a> you will learn the essential of web development technologies along with real life practice example، so that you can create your own website to connect with the people around the world.</p>
<p><a class=”btn btn-success btn-lg” href=”http:// www.tahlildadeh.com” target=”_blank”>Get started today</a></p>
</div>
<div class=”row”>
<div class=”col-xs-4″>
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML، so that you can create your own web pages or website.</p>
<p><a class=”btn btn-success” href=”http:// www.tahlildadeh.com” target=”_blank”>Learn More »</a></p>
</div>
<div class=”col-xs-4″>
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS، so that you can fine control the style and layout of your HTML document.</p>
<p><a class=”btn btn-success” href=”http:// www.tahlildadeh.com” target=”_blank”>Learn More »</a></p>
</div>
<div class=”col-xs-4″>
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
<p><a href=”http:// www.tahlildadeh.com” target=”_blank”>Learn More »</a></p>
</div>
</div>
<hr>
<div class=”row”>
<div class=”col-xs-12″>
<p>© Copyright 2013 Tutorial Republic</p>
</div>
</div>
</div>
