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

آموزش استفاده از کلاس های bootstrap

در این بخش در مورد گروه های کمک کننده twitter bootstrap فراخواهید گرفت.

کمک کننده های تویتر بوت استرپ

تویتر بوت استرپ تعدادی گروه های CSS برای استفاده های مداوم ارائه می دهد.

رنگ های متنی

شما می توانید از گروه های رنگ متنی مانند . text-succes, .text-info, .text-warningو غیره برای تاکید متن استفاده کنید.

زمینه های متنی

مثال :

Important: Please read the instructions carefully before proceed.

Success: Your message has been sent successfully.

Note: You must agree with the terms and conditions to complete the sign up process.

Warning: There was a problem with your network connection.

Error: An error has been occurred while submitting your data.

خروجی مثال زیر مانند تصویر زیر خواهد بود.

Bootstrap
نکته:

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

آیکن بستن

تویتر بوت استرپ تعدادی گروه های CSS برای استفاده های مداوم ارائه می دهد.

مثال :

	 
× Warning! There was a problem with your network connection.

خروجی مثال بالا مانند تصویر زیر می باشد.

Bootstrap آیکن هشتک (caret).

آیکن هشتک (caret)

بوت استرپ یک آیکن هشتک کلی برای نشان دادن عملکرد رو به پایین ارائه می دهد. جهت آیکن هشتک در منوهای رو به بالا به طور خودکار معکوس می شود.

مثال :


		

خروجی مثال فوق مانند تصویر زیر می باشد.

Bootstrap

مرکز ترازبندی بلوک های محتوا

شما می توانید از گروه بوت استرپ .center-block برای تنظیم افقی محتوای بلوک مرکزی استفاده کنید. به هرحال برای تنظیم تاثیر این گروه باید عرض بلوک محتوا را خودتان تنظیم کنید که باید کمتر از دارنده ی عنصر اصلی باشد.

مثال :

 

    
Center Aligned DIV Box

Note:Play with .center-block width property value to understand how it works.

شناورهای فوری

شما می توانید با استفاده از گروه های .pull-left و .pull-rightعنصری را به سرعت در سمت راست یا چپ قرار دهید. این گروه ها دارای اعلامیه ی !import antCSS می باشند تا از مشخص شدن مطالب جلوگیری کنند.

مثال :

    
Floated to left.
Floated to right.

گروه .clear fix

شناور را بر روی هر عنصری مشخص می کند. این گروه به طور گسترده ای برای ثابت کردن منبع از هم پاشیده استفاده می شود، جایی که عنصر منبع دارای جعبه های شناور می باشد.

مثال :

 .wrapper {

        margin: 20px;

        padding: 10px;

        background: #fffacd;

        border: 1px solid #000;

    }

    .pull-left,.pull-right {

        padding: 20px;

        background: #e3b740;

    }

    
    
Float to left
Float to right

گروه.clear fix

شناور را بر روی هر عنصری مشخص می کند. این گروه به طور گسترده ای برای ثابت کردن منبع از هم پاشیده استفاده می شود، جایی که عنصر منبع دارای جعبه های شناور می باشد.

مثال :

	
	

    .wrapper {

        margin: 20px;

        padding: 10px;

        background: #fffacd;

        border: 1px solid #000;

    }

    .pull-left,.pull-right {

        padding: 20px;

        background: #e3b740;

    }

    

    
Float to left
Float to right

نمایش دادن و پنهان کردن محتوا

شما می توانید کاری کنید که عنصری روی همه ی دستگاه هایی که از گروه های .show و .hiddenاستفاده می کنند، نمایش داده شود و یا مخفی شود. این گروه ها نیز دارای پیام CSS !important برای جلوگیری از تضاد ها می باشند، درست مثل شناورهای فوری. به علاوه شما می توانید از گروه .invisible برای پوشاندن قابل رویت بودن یک عنصر استفاده کنید، به هرحال عنصر هنوز فضایی را در لی اوت اشغال کرده است.

مثال :

This is visible to the user.

محتوای مخصوص صفحه ی خواننده ها

گروه خاص .sr-only یک عنصر را برای همه ی دستگاه ها به جز صفحات خواننده ها پنهان می کند.

مثال :

This paragraph is visible to all devices.

This paragraph is only visible to screen readers.

پنهان کردن متن

شما می توانید از گروه .text-hide استفاده کرده و محتوای متنی را از یک عنصر پنهان کنید.

مثال :

	

The text of this heading is not visible

The text of this paragraph is not visible.

توجه:

قبل از استفاده از این گروه خوب فکر کنید، زیرا این گروه با استفاده از color: transparent و font-size: 0px متن را پنهان می کند. موتورهای جستجو تکنیک هایی مانند اسپم را در نظر می گیرند که ممکن است منجر به جریمه شوند.

  • 3586
  •    2230
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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