آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش fluid Layout در Bootstrap

Twitter Bootstrap Fixed Layout

در این آموزش فراخواهید گرفت که با استفاده از Twitter Bootstrap چگونه لی اوت ثابت ایجاد کنید.

ایجاد لی اوت ثابت با استفاده از تویتر بوت استرپ

با 3 Twitter Bootstrap می توانید لی اوت هایی از صفحات وب بر اساس تعداد پیکسل ثابت ایجاد کنید، به هرحال این بار برخلاف ورژن قبل از همان ابتدا responsive می باشد، طوریکه شما باید روش responsive را وارد کنید تا آن را برای دیگر دستگاه ها نیز responsive کنید. فرایند ایجاد لی اوت ثابت و در عین حال responsive با گروه .container آغاز می شود. پس از آن ردیف هایی را با گروه .row ایجاد کنید تا گروه های افقی مربوط به ستون ها را پوشش دهید. ردیف ها برای هم ترازی و لایه گذاری درست باید در داخل یک .container قرار بگیرند. ستون های بیشتری با استفاده از گروه های گرید از پیش تعریف شده مانند .col-xs-*، .col-sm-*، .col-md-* و .col-lg-*می توانند در داخل ردیف ها ایجاد شوند، که * نمایشگر شماره ی گرید می باشد و باید از 1 تا 12 باشد.

نکته:

محتوای حقیقی مانند متن، تصاویر، فیلم ها و غیره باید در داخل ستون ها قرار بگیرند و تنها هستند که می توانند زیرمجموعه ی بی واسطه ی ردیف ها باشند.

کد زیر یک لی اوت responsive با عرض ثابت ایجاد می کند که عرض آن روی دستگاه های کوچک دارای صفحه ای به عرض ≥768px مانند تبلت، 750px می باشد، در حالیکه عرض آن روی دستگاه های متوسط مانند دسک تاب و لب تاب دارای صفحه ای به عرض ≥992pxعدد 970px می باشد و روی دستگاه های بزرگتر با صفحه ای به عرض ≥1200pxدارای عرض 1170px می باشد. به هرحال عرض لی اوت به طور خودکار برای دستگاه هایی با عرض <768pxمانند تلفن های همراه، به طور خودکار محاسبه می شود.

مثال :

‎

‎

    ‎

    ‎

    Twitter Bootstrap 3 Fixed Layout Example‎

 ‎    ‎

    ‎

    ‎

‎



    

        
‎ ‎

Learn to Create Websites

In today's world internet is the most popular way of connecting with the people. At tutorialrepublic.com 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.

Get ‎started today

HTML

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.

Learn More »

CSS

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.

Learn More »

Bootstrap

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.

Learn More »


© Copyright 2013 Tutorial Republic

‎ ‎
  • 1161
  •    1746
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .