کتاب آموزش گام به گام Bootstrap به زبان فارسی

فهرست

مقدمه

توجه :

آموزش بوت استرپ تویتر

مثال های بوت استرپ

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

معرفی تویتر بوت استرپ

تویتر بوت استرپ چیست

مزیت های بوت استرپ تویتر

ویژگی های پاسخگو

طراحی منسجم

استفاده ی آسان

سازگار با مرورگرها

شروع کردن با تویتر بوت استرپ

دانلود فایل های بوت استرپ

درک ساختار فایل

ایجاد اولین صفحه ی وب با تویتر بوت استرپ

مرحله اول: ایجاد یک فایل HTML پایه

مرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTML

مرحله ی سوم: ذخیره ی فایل

Twitter Bootstrap Grid System

چگونگی ایجاد Layout با گرید سیستم تویتر بوت استرپ

گروه های نرم افزارهای پاسخگو تویتر بوت استرپ

Twitter Bootstrap Fixed Layout

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

Twitter Bootstrap Fluid Layout

ایجاد Layout Fluid با Twitter bootstrap

ایجاد Layout responsive با استفاده از تویتر بوت استرپ

کار با تیتر

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

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

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

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

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

طراحی نقل قول

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

جدول چیست؟

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

جدول هایی با پیش زمینه ی یکی در میان

جدول با حاشیه

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

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

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

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

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

Twitter Bootstrap Lists

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

لیست های منظم و نامنظم بدون سبک

قرار دادن آیتم های لیست های منظم و نامنظم درون خط

ایجاد لیست های تعریف افقی

گروه های لیست تویتر بوت استرپ

ایجاد فرم ها با تویتر بوت استرپ

ایجاد فرم Layout عمودی

ایجاد فرم Layout افقی

ایجاد فرم Layout درون خطی

فرم کنترل استاتیک

اندازه ارتفاع در جعبه های ورودی و انتخاب

انداره ی گرید جعبه های ورودی، متن و انتخاب

گسترش فرم های کنترل با تویتر بوت استرپ

ایجاد ورودی های افزوده و اضافه

افزودن متن یا آیکن به یک ورودی

ایجاد دکمه های رو به پایین

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

ایجاد ورودی های غیرفعال

قرار دادن متن کمکی در اطراف کنترل های فرم

وضعیت های ارزیابی فرم تویتر بوت استرپ

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

تصاویر تویتربوت استرپ

طراحی تصاویر با تویتر بوت استرپ

تصاویر کوچک تویتر بوت استرپ

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

آیکن های تویتر بوت استرپ

آیکن هایی با gliphycon

چگونه از آیکن ها در کد خود استفاده کنید

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

رنگ های متنی

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

آیکن بستن

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

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

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

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

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

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

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

تغییر اندازه دکمه ها

دکمه های غیرفعال تویتر بوت استرپ

ایجاد دکمه های غیرفعال با استفاده از لینک ها

ایجاد دکمه های غیرفعال با استفاده از دکمه و عنصر ورودی

ایجاد دکمه های با وضعیت

ایجاد دکمه ی انفرادی پوشاننده

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

ایجاد چک باکس دکمه ها

ایجاد دکمه های رادیو

ایجاد ابزارهای دکمه

اندازه گیری ارتفاع گروه های دکمه

ایجاد گروه های دکمه ی هم راستا

دکمه های فعال از طریق جاوا اسکریپت

$().button('toggle')

مولفه های nav تویتر بوت استرپ

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

افزودن آیکن ها به تب ها

ایجاد  pillهای  nav پایه  با تویتر بوت استرپ

افزودن آیکن به pillهای nav

Stacked pills nav

تب ها و   pills nav تویتر بوت استرپ با منوهای رو به پایین

ایجاد تب های رو به پایین

ایجاد pill  های رو به پایین

تب ها و pill های توجیه شده

لینک های غیرفعال در داخل مولفه های  nav

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

Nav bar  ثابت تویتر بوت استرپ

ایجاد  nav bar  ثابت در بالا

ایجاد  nav bar  ثابت در پایین

Nav bar استاتیک تویتربوت استرپ در بالا

Nav bar تویتربوت استرپ با فرم جستجو

ایجاد گونه ی معکوس یک nav bar

ایجاد breadcrumb با تویتر بوت استرپ

شماره گذاری (pagination) با تویتر بوت استرپ

شماره گذاری با وضعیت هاب فعال و غیرفعال

تغییر اندازه های شماره گذاری

صفحه گذاری تویتر بوت استرپ

هم ترازی صفحه گذاری

ایجاد برچسب های درون خطی

ایجاد نشان های درون خطی

ایجاد نوار پیشروی با استفاده از تویتربوت استرپ

ایجاد نوار پیشروی خط دار

ایجاد نوار پیشروی هم پوشانی شد

نوارهای پیشروی با گروه های تاکید

نوارهای پیشروی خط دار با گروه های تاکید

معرفی پنل های twitter bootstrap 3

پنل هایی با تیتر

پنل هایی با فوتر

پنل هایی با موقعیت های متنی

قرار دادن گروه های لیست و جدول ها در داخل پنل ها

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

Jumbotron

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

منوهای رو به پایین در navbar

منوی رو به پایین در Navs

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

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

رو به پایین ها داخل گروه های دکمه

منوهای رو به بالا

اضافه کردن منوی رو به پایین با ویژگی های داده

افزودن dropdown ها از طریق جاوا اسکریپت

$().dropdown('toggle')

ایجاد tooltip با تویتر بوت استرپ

راه اندازی راهنمای ابزار

تنظیم جهت راهنمای ابزار

تثبیت موقعیت راهنمای ابزار از طریق ویژگی های داده

تثبیت موقعیت راهنمای ابزار از طریق جاوا اسکریپت

$().tooltip(options)

ایجاد پیام های اخطار با تویتر بوت استرپ

هشدارهای خروج از طریق جاوا اسکریپت

.alert('close')

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

ایجاد تب پویا با اسثفاده از ویژگی های داده

ایجاد تب های پویا از طریق جاوا اسکریپت

ایجاد نما با تویتر بوت استرپ

فعال کردن نماها از طریق ویژگی های داده

فعال کردن نماها از طریق جاوااسکریپت

تغییر محتوای نما براساس دکمه ی اجرا

.modal(options)

ایجاد popover با تویتر بوت استرپ

راه اندازی popover

تنظیم جهت popover

تثبیت موقعیت popover ها از طریق موقعیت داده

تثبیت موقعیت popover ها از طریق جاوا اسکریپت

ایجاد ویجت accordion با تویتر بوت استرپ

.collapse(options)

ایجاد typeahead در تویتر بوت استرپ

ایجاد typeahead تویتر با مجموعه داده ی مکانی

ایجاد مجموعه داده خارجی typeahead تویتر

ایجاد scrollspy با تویتر بوت استرپ

ایجاد scrollspy با استفاده از ویژگی های داده

ایجاد scrollspy از طریق جاوا اسکریپت

.scrollspy('refresh'):

ایجاد عنصر ضمیمه با تویتر بوت استرپ

فعالسازی ضمیمه از طریق جاوا اسکریپت

ایجاد گردانه ی صفحه با تویتر بوت استرپ

فعال سازی گردانه با استفاده از تویتر بوت استرپ

فعالسازی گردانه ها از طریق جاوا اسکریپت

carousel(options)

carousel(number)

carousel('prev')