بوت استرپ از ابتدا| 6 پروژه برای ساخت وب سایت

سرفصل ها و درس ها

بوت استرپ - مبتدی تا فراتر Bootstrap - Beginners to Beyond

• مقدمه ای بر بوت استرپ Introduction to Bootstrap

• چیدمان های بوت استرپ Layouts of Bootstrap

• راه اندازی پروژه Setting Up Project

• راه اندازی پروژه ادامه دارد Setting Up Project Continues

• راه اندازی پروژه CDN Viewport Setting Up Project CDN Viewport

• راه اندازی پروژه با استفاده از Bower Setting Up Project Using Bower

• ساختار اساسی ابزار مدیریت بسته Basic Structure of Package Management Tool

• مقدمه ای بر Tabs Introduction to Tabs

• خانواده ناو Tabs Nav Family

• افزودن محتویات برگه Adding Tab Contents

• سیستم شبکه Grid System

• سیستم گرید ادامه دارد Grid System Continues

• مایع ظرف کانتینر Container Container Fluid

• ستون های ردیف کانتینر Container Rows Columns

• اطلاعات بیشتر در مورد ستون های ردیف کانتینر More on Container Rows Columns

• قوانین ستون های ردیف کانتینر Container Rows Columns Rules

• مقدمه ای بر Nesting Introduction to Nesting

• مثال تودرتو Nesting Example

• کشش فشار و آفست Pulling Pushing and Offsetting

• تصاویر واکنش گرا Responsive Images

• تصویر شبکیه چشم Image Retina

• مخفی شدن در بوت استرپ Hiding in Bootstrap

• اصلاح کننده های تصویر Image Modifiers

• کلاس های کمکی Helper Classes

• مرکز و شناور Centering and Floating

• ترازبندی متن Text Alignment

• ساختن چیدمان ها Building the Layouts

• بخش ها و بخش های یک ظاهر طراحی شده Sections and Styling Sections

• اضافه کردن Jumbotron و Styling Jumbotron Adding Jumbotron and Styling Jumbotron

• چرخ فلک Carousel

• دکمه ها و شاخص های محتویات Contents Buttons and Indicators

• معرفی و کارت Introduction and Cards

• نوارهای نوار و ناوبری کامل NavBars and Full Navigation

• رابط همبرگر The Hamburger Interface

• کشویی Dropdown

• پنجره مدال چیست؟ What is Modal Window

• ویندوز مدال Modal Windows

• Windows Modal همچنان ادامه دارد Modal Windows Continues

• یک ظاهر طراحی شده نوار نوار Styling Nav Bar

• تعمیر نوار NavBar Fixating The NavBar

• Scrollspy Scrollspy

BootStrap - پیشرفته BootStrap - Advanced

• مقدمه ای بر پیشرفته بوت استرپ 4 Introduction to Advance Bootstrap 4

• سفارشی سازی سرعت اسکرول در بوت استرپ 4 Customization of Scroll Speed in Bootstrap 4

• اطلاعات بیشتر در مورد سفارشی سازی سرعت اسکرول More on Customization of Scroll Speed

• نحوه ایجاد آیکون با استفاده از بوت استرپ 4 How to Create Icon using Bootstrap 4

• کار با فونت های آیکن Working with Icons Fonts

• اطلاعات بیشتر در مورد فونت های نمادها More on Icons Fonts

• جعبه های هشدار در بوت استرپ 4 Alerts Boxes in Bootstrap 4

• نمونه ای از جعبه های هشدار Example of Alert Boxes

• ایجاد پاورقی در بوت استرپ 4 Creating Footer in Bootstrap 4

• بیشتر در مورد ایجاد پاورقی More on Creating Footer

• ایجاد فرم ها در بوت استرپ 4 Creating Forms in Bootstrap 4

• ایجاد فرم ها در بوت استرپ 4 ادامه دارد Creating Forms in Bootstrap 4 Continues

• ایجاد دکمه در فرم Creating Buttons in Form

• افزودن برچسب در فرم Adding Labels in Form

• کار با اعتبار سنجی فرم در بوت استرپ 4 Working With Form Validation in Bootstrap 4

• افزودن محتوا با استفاده از Media Object در Bootstrap 4 Adding Content using Media Object in Bootstrap 4

• کار با BlockQuote در BootStrap Working with BlockQuote In BootStrap

• شاخص های پیشرفت و کلاس شکل Progress Indicators and Figure Class

• افزایش سرعت توسعه با استفاده از جی کوئری Speeding up Development using Jquery

• نصب تشخیص مرورگر Jquery Installing Jquery Browser Detection

• اطلاعات بیشتر در مورد مرورگر Jquery More on Jquery Browser

• اضافه کردن منطق در مرورگر جی کوئری Adding Logics in Jquery Browser

• کار با صفحه بندی در بوت استرپ 4 Working with Pagination in Bootstrap 4

• بوت پاگ در بوت استرپ 4 Bootpag in in Bootstrap 4

• اطلاعات بیشتر در مورد صفحه بندی در بوت استرپ 4 More on Pagination in Bootstrap 4

• اطلاعات بیشتر در مورد صفحه بندی در بوت استرپ 4 ادامه دارد More on Pagination in Bootstrap 4 Continues

• مشکل با بوت پاگ Issue with Bootpag

• خروجی صفحه بندی Pagination Output

• نمایش تصاویر با استفاده از BootStrap LightBox Displaying Images using BootStrap LightBox

• نمونه ای از جدول داده ها Example of Data Table

• نمونه ای از جدول داده ها ادامه دارد Example of Data Table Continues

• رفع مشکلات داده ها در بوت استرپ 4 Fixing Data Tvales in Bootstrap 4

• سفارشی کردن پلاگین ها در بوت استرپ 4 Customizing Plugins in Bootstrap 4

• Anatomy Of Plugin در Bootstrap 4 Anatomy Of Plugin in Bootstrap 4

• آناتومی پلاگین در بوت استرپ با استفاده از روش های جاوا اسکریپت Anatomy Of Plugin in Bootstrap using Java Script Methods

• Data API Anatomy of Plugin Data API Anatomy of Plugin

• آشنایی با SCSS در پلاگین ها Understanding SCSS in Plugins

• افزودن افزونه Alert Markup Adding Alert Markup Plugin

• سفارشی کردن هشدار افزونه با استفاده از گسترش برگه‌های سبک هشدار Customizing Plugin Alert using Extending Alert Style Sheets

• سفارشی کردن هشدار پلاگین با استفاده از Expand Function To Plugin Custtomizing Plugin Alert using Expand Function To Plugin

• سفارشی کردن پلاگین ها چرخ فلک Customizing Plugins Carousel

• نمونه ای از سفارشی کردن پلاگین ها چرخ فلک Example of Customizing Plugins Carousel

پروژه در بوت استرپ - ایجاد وب سایت آژانس Project on Bootstrap - Creating an Agency Website

• مقدمه ای برای ایجاد پروژه وب سایت با استفاده از بوت استرپ Intro to Creating Website Project using Bootstrap

• بخش سرصفحه Header Section

• ناوبری Navigation

• پیمایش ادامه دارد Navigation Continue

• گریدها قسمت 1 Grids Part 1

• شبکه ها قسمت 2 Grids Part 2

• گریدها قسمت 3 Grids Part 3

• گریدها قسمت 4 Grids Part 4

• گریدها قسمت 5 Grids Part 5

• گریدها قسمت 6 Grids Part 6

• گریدها قسمت 7 Grids Part 7

پروژه ها در بوت استرپ Projects on BootStrap

• مقدمه ای بر بوت استرپ 4 Introduction to Bootstrap 4

• نحوه نصب بوت استرپ 4 How to Installing Bootstrap 4

• نحوه نصب بوت استرپ 4 ادامه دارد How to Installing Bootstrap 4 Continues

• کانتینر بوت استرپ Bootstrap Container

• کار با Grids در Bootstrap 4 Working with Grids in Bootstrap 4

• نمونه ای از ایجاد گرید در بوت استرپ 4 Example of Creating Grids in Bootstrap 4

• ایجاد صفحه وب پیچیده با استفاده از بوت استرپ 4 Creating Complex Web Page using Bootstrap 4

• ایجاد صفحه وب پیچیده با استفاده از Bootstrap 4 ادامه دارد Creating Complex Web Page using Bootstrap 4 Continues

• تایپوگرافی در بوت استرپ 4 Typography in Bootstrap 4

• اطلاعات بیشتر در مورد تایپوگرافی در Bootstrap 4 More on Typography in Bootstrap 4

• ایجاد جداول در بوت استرپ 4 Creating Tables in Bootstrap 4

• افزودن رنگ پس زمینه به عناصر جدول Adding Background Color to Table Elements

بوت استرپ - وب سایت های واکنش گرا ایجاد کنید Bootstrap - Create Responsive Websites

• مقدمه ای بر بوت استرپ Introduction to Bootstrap

• دانلود و نصب Downloading and Installation

• افزودن فایل بوت استرپ به HTML Adding Bootstrap File Into HTML

• سیستم بوت استرپ گرید Bootstrap Grid System

• ترکیب شبکه و تایپوگرافی Grid Combination and Typography

• Jumbotron Basic HTML Jumbotron Basic HTML

• کار بر روی Navbar Working on Navbar

• افزودن لینک به نوار ناوبری Adding Links into Navigation Bar

• ناوبری بوت استرپ توضیح داده شد Bootstrap Navigation Explained

• فروپاشی بوت استرپ Bootstrap Collapse

• پایین آمدن ناوبری بوت استرپ Bootstrap Navigation Collapse

• Bootstrap Dropdown Bootstrap Dropdown

• Bootstrap Dropdown ادامه دارد Bootstrap Dropdown Continues

• ناوبری کشویی بوت استرپ Bootstrap Dropdown Navigation

• نمادهای بوت استرپ گلیف Bootstrap Glyph icons

• دکمه های بوت استرپ Bootstrap Buttons

• دکمه های بوت استرپ ادامه دارد Bootstrap Buttons Continues

• گروه دکمه بوت استرپ Bootstrap Button Group

• اطلاعات بیشتر در مورد Bootstrap Button Group More on Bootstrap Button Group

• هشدار بوت استرپ Bootstrap Alert

• تصاویر بوت استرپ Bootstrap Images

• جداول بوت استرپ Bootstrap Tables

• نشان های بوت استرپ Bootstrap Badges

• نوار پیشرفت بوت استرپ Bootstrap Progress bar

• Bootstrap-Vertical-Form Bootstrap-Vertical-Form

• Bootstrap-Inline-Horizontal-Form Bootstrap-Inline-Horizontal-Form

• پر کردن فرم Form Fill

• Bootstrap-Form-Input Bootstrap-Form-Input

• چک باکس های بوت استرپ Bootstrap Check Boxes

• دکمه رادیو Radio Button

• Bootstrap-Form-Example Bootstrap-Form-Example

• Bootstrap-Form-Control-State Bootstrap-Form-Control-State

• Bootstrap-List-Group Bootstrap-List-Group

• لیست آیتم ها Item List

• Bootstrap-Modal Bootstrap-Modal

• Bootstrap-Modal Continue Bootstrap-Modal Continue

• بوت استرپ-صفحه بندی Bootstrap-Pagination

• بوت استرپ-پنل-آکاردئون Bootstrap-Panel-Accordion

• بوت استرپ-پنل-آکاردئون ادامه دهید Bootstrap-Panel-Accordion Continue

• Bootstrap-Tool-Tip Bootstrap-Tool-Tip

• Bootstrap-Theme-Explained Bootstrap-Theme-Explained

• Bootstrap-Theme-Explained ادامه دهید Bootstrap-Theme-Explained Continue

پروژه - ساخت وب سایت پاسخگو با استفاده از HTML5، CSS3، JS و Bootstrap Project - Build Responsive Website using HTML5, CSS3, JS And Bootstrap

• مقدمه ای بر ساخت وب سایت Introduction to Building Website

• پیوند دادن فایل Boot Strap Linking Boot Strap File

• ایجاد لوگوی وب سایت Creating Website Logo

• تبدیل لوگو به SVG Converting Logo to SVG

• سبک دادن به لوگو Styling the Logo

• سفارشی کردن لوگو Customizing the Logo

• موقعیت یابی لینک Positioning the Link

• تغییر اثرات پیوند Changing the Effects of Link

• سفارشی کردن پس زمینه Customizing the Background

• استایل دهی به Navigations Styling the Navigations

• تغییر رنگ لوگو Changing the Logo Color

• بررسی نمای کلی سایت Checking the Oerview of Site

• لغزنده بوت استرپ در وب سایت Bootstrap Slider in Website

• تغییر مقیاس تصویر به فایل Scaling Image to File

• لغزش داده ها در وب سایت Data Sliding in Website

• حاشیه ها در نوار نوار Margins in Nav Bar

• اضافه کردن متن در وب سایت Adding Text on website

• متن روی تصویر Text on the Image

• تعیین موقعیت نوار متن Positioning the Text Strip

• تغییر رنگ Changing the Color

• کار روی محتوا Working on the Content

• تغییر اندازه تصویر Resizing the Image

• تعیین موقعیت تصویر دوم Positioning the Second Image

• متن بالای تصویر Text on top of the Image

• موقعیت یابی متن تفصیلی Positioning Detailed Text

• موقعیت یابی دو متن Positioning Two Text

• افزودن لیست در ناحیه محتوا Adding List in the Content Area

• اضافه کردن تصویر و متن Adding Image and Text

• کار بر روی لیست اضافه شده Working on the Added List

• کار بر روی شکاف های تصویر Working on the Image Gaps

• افزودن به دستگاه های سفارشی Adding to the Custom Devices

• ایجاد پاورقی برای مرورگر Creating a Footer to the Browser

• کار با فوتر بلوک Working with Footer Blocks

• ایجاد اشتراک گذاری در رسانه های اجتماعی Creating a Social Media Sharing

• تغییر اندازه قلم آیکون Changing the Icon Font Size

• تراز کردن لوگو در پاورقی Aligning the Logo on Footer

• زیباسازی و طراحی پاورقی Beautifying and Designing the Footer

• تصحیح تصویر در پاورقی Fixing the Image on Footer

• اضافه کردن رنگ پس زمینه Adding Background Color

• تعیین موقعیت و تراز کردن متن Positioning and Aligning the Text

• سبک دادن به متن و لوگو Styling the Text and Logo

• تغییر اندازه قسمت هدر Resizing the Header Portion

• کار بر روی اندازه فونت و ارتفاع Working on the Fontsize and Height

• معکوس کردن موقعیت ستون ها Reversing the Position of Columns

• نمایش هیچ کدام برای تصویر اضافی Display none for extra image

• محاسبه فاصله اضافی Figuring the extra distance

• کاهش padding در تصاویر Decreasing the padding in images

• تغییر اندازه فونت متن Changing font size of text

• تنظیم ارتفاع تصویر Adjusting height of image

• کار با نوار ناوبری و محتوا Working with the navbar & content

• قرار دادن دکمه جابجایی Placing the Toggle Button

پروژه در بوت استرپ - ایجاد یک وب سایت تجارت الکترونیک Project on BootStrap - Creating an e-Commerce Website

• معرفی پروژه Introduction to the Project

• سربرگ Header

• منو Menu

• بخش Section

• شبکه ها Grids

• شبکه ها ادامه دارد Grids Continue

• محصولات Products

• نتیجه گیری Conclusion

• نتیجه گیری ادامه Conclusion Continue

پروژه در بوت استرپ - برنامه وب پاسخگو Project on Bootstrap - Responsive Web App

• مقدمه ای بر پروژه Introduction to Project

• ایجاد صفحه اصلی با استفاده از HTML قسمت 1 Creating Home Page using HTML Part 1

• ایجاد صفحه اصلی با استفاده از HTML قسمت 2 Creating Home Page using HTML Part 2

• افزودن فایل CSS Adding CSS File

• فایل بوت استرپ Bootstrap File

• پیاده سازی کلاس های بوت استرپ Implementing Bootstrap Classes

• اصلاح صفحه HTML Modifying HTML Page

• اصلاح صفحه HTML ادامه دهید Modifying HTML Page Continue

• ایجاد صفحه درباره ما Creating About Us Page