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

آموزش ایجاد جدول با bootstrap

دوره های مرتبط با این مقاله

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

در این آموزش فرا خواهید گرفت که چگونه با استفاده از تویتربوت استرپ جدول های زیبا طراحی کنید.

جدول چیست؟

جدول های HTML برای نمایش داده به روش گرید مانند ستون ها و جدول ها استفاده می شوند. با استفاده از تویتر بوت استرپ می توانید ظاهر جدول را به سادگی بهتر کنید.

ایجاد یک جدول ساده با تویتر بوت استرپ

می توانید جدول هایی با طراحی پایه ایجاد کنید که دارای تقسیم کننده های افقی و لایه گذاری های کوچک (به طور پیش فرض 8px) باشند، این کار فقط با اضافه کردن گروه بوت استرپ .table به عنصر انجام می شود.

مثال :
                                        
Row First Name Last Name Email
1 John Carter johncarter@mail.com
2 Peter Parker peterparker@mail.com
3 John Rambo johnrambo@mail.com

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

Bootstrap

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

می توانید جدولی با پیش زمینه ی یکی در میان ایجاد کنید، مانند خط های گورخر. این کار به راحتی با اضافه کردن گروه بوت استرپ .table-striped به گروه پایه ی .table انجام می شود. این کار با اضافه کردن رنگ پیش زمینه به ردیف جدول در داخل عنصر از طریق انتخاب گر CSS:nth-child قابل انجام می باشد ( در IE7-8 پشتیبانی نمی شود.).

مثال :
		
                                        
RowFirst NameLast NameEmail
1JohnCarterjohncarter@mail.com
2PeterParkerpeterparker@mail.com
3JohnRambojohnrambo@mail.com

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

Bootstrap

جدول با حاشیه

شما می توانید با اضافه کردن گروه بوت استرپ .table-bordered به گروه پایه ی .table حاشیه هایی به همه ی سلول های جدول اضافه کنید.

مثال :

        
                                        
Row First Name Last Name Email
1 John Carter johncarter@mail.com
2 Peter Parker peterparker@mail.com
3 John Rambo johnrambo@mail.com

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

Bootstrap

فعال کردن وضعیت شناور (hover) روی ردیف های جدول

شما می توانید با اضافه کردن گروه بوت استرپ .table-hover به گروه پایه ی table، یک وضعیت معلق را روی ردیف های جدول در داخل عنصر فعال کنید.

به علاوه می توانید از برچسب به همراه گروه .small برای نمایش متن ثانویه ی هر تیتر در یک نمونه ی کوچکتر و روشن تر استفاده کنید.

مثال :

		 
                                        

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

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

Bootstrap

ایجاد تیترهای صفحه

می توانید با استفاده از مولفه ی تیتر صفحه، تیتر خود را طوری بسازید که با دیگر تیترهای روی صفحه متفاوت به نظر برسد. همچنین می توانید از برچسب برای مارکدار کردن متن مربوط به تیتر استفاده کنید.

مثال :
			
                                        
		            

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

Bootstrap

کار با پاراگراف ها

اندازه فونت جهانی بوت استرپ 14px با ارتفاع خط 1.428 می باشد که برای متن و همه ی پاراگراف استفاده می شود. علاوه بر آن دکمه ی حاشیه از نیمه ی ارتفاع خط برای کل پاراگراف ها استفاده می شود. شما می توانید پاراگرافی با اضافه کردن گروه .lead بسازید.

مثال :

		
                                        

This is how a normal paragraph looks like in Twitter Bootstrap.

This is how a paragraph stands out in Twitter Bootstrap.

کد HTML مثال بالا نتیجه ی زیر را به دنبال دارد.

Bootstrap

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

		 
                                        

Left aligned text.

Center aligned text.

Right aligned text.

Justified text

No wrap text.

قالب بندی متن twitter bootstrap

شما در استفاده از برچسب های قالب بندی متن مانند ، و برای بولد کردن، ایتالیک کردن و یا کوچک کردن متن خود آزاد هستید، به همان روشی که در HTML انجام می دادید.

مثال :
		 
                                        

This is bold text

This is big text

This is computer code

This is emphasized text

This is italic text

This is highlighted text

This is small text

This is strongly emphasized text

This is subscript and superscript

This text is inserted to the document

This text is deleted from the document

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

Bootstrap

گروه های تغییردهی متن

شما می توانید همچنین متن را به حروف کوچک یا بزرگ تغییر دهید .

		 
                                        

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

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

Bootstrap

گروه های تاکید در متن

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

مثال :

		
                                        

Muted: This text is grayed out.

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

طراحی نقل قول

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

مثال :

		
                                        

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.

by Albert Einstein

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

Bootstrap

همچنین می توانید از طریق شناور ساختن آن در سمت راست و با به کار بردن گروه .pull-right در عنصر نقل قول را در سمت راست تنظیم کنید.

مثال :

		
                                        

The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.

by Albert Einstein

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

Bootstrap

مثال :

		 
                                        
RowFirst NameLast NameEmail
1JohnCarterjohncarter@mail.com
2PeterParkerpeterparker@mail.com
3JohnRambojohnrambo@mail.com

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

Bootstrap

جدول های فشرده یا متراکم

با اضافه کردن گروه .table-condensed به گروه پایه ی .table می توانید جدول های خود را متراکم تر کرده و از این طریق فضا ذخیره کنید. گروه .table-condensed با نصف کردن لایه های سلول ها، جدول را متراکم می کند.

مثال :

		 
                                        
RowFirst NameLast NameEmail
1JohnCarterjohncarter@mail.com
2PeterParkerpeterparker@mail.com
3JohnRambojohnrambo@mail.com

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

Bootstrap

گروه های تاکید انتخابی برای ردیف های جدول

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

مثال :

      
                                        
RowBillPayment DatePayment Status
1Credit Card04/07/2014Call in to confirm
2Water01/07/2014Paid
3Internet05/07/2014Change plan
4Electricity03/07/2014Pending
5Telephone06/07/2014Due

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

Bootstrap

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

با Twitter bootstrap 3 می توانید جدول های پاسخگو هم ایجاد کنید تا اسکرول را در دستگاه های کوچک ( با عرض صفحه ی کمتر از 768px) فعال کنید. به هرحال جدول های پاسخگو روی دستگاه های دیگر با عرض بیشتر از 768px تفاوتی ندارد.

مثال :

		
                           
                                        
Row First Name Last Name Email Biography
1JohnCarterjohncarter@mail.com Loremipsum dolor sit amet…
2Peter Parkerpeterparker@mail.comVestibulumconsecteturscelerisque…
3JohnRambojohnrambo@mail.comInteger pulvinarleo id risus…

عناصر پشتیبانی شده ی جدول در تویتر بوت استرپ

جدول زیر عناصر پشتیبانی شده ی جدول HTML و چگونگی استفاده از آنها را ارائه می دهد.

آموزش bootstrap
  • 2414
  •    1856
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

تلفن: 88146323 - 88146330 تلفن همراه: 09384446753 تماس همه روزه از ساعت 9 صبح تا 19 شب پست الکترونیک: tahlildadehins@gmail.com آدرس: تهران - خيابان شريعتی - بالا تر از خیابان ملک - جنب بانک صادرات - پلاک 561 - واحد 7
تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .