پیشنهاد فرادرس

افزودن قابلیت تعاملی به وب سایت با Bootstrap 3

دسته بندی ها: آموزش بوت استرپ (Bootstrap) ، فریمورک ها ، آموزش های لیندا (Lynda) ، آموزش طراحی وب ، آموزش جی کوئری (JQuery)

در این آموزش تصویری با افزودن قابلیت تعاملی به وب سایت با استفاده از Bootstrap آشنا می شوید.

این دوره آموزشی محصول موسسه Lynda می باشد.

سرفصل های دوره آموزشی:

  • راه اندازی
  • نصب و راه اندازی متن
  • نصب Bootstrap 3
  • نصب jQuery
  • ساخت گالری عکس با Modal Pop-Ups
  • برنامه ریزی گالری عکس
  • ایجاد پنجره های Modal
  • لینک کردن عکسها به پنجره های Modal
  • افزایش طرح بندی با نوشتن شرح تصاویر
  • ظاهر طراحی شده عکسها و modal
  • سوالات رایج تصویر برای صفحه اصلی سایت
  • سفارشی کردن استایل ها
  • ایجاد فرم 
  • ورودی متن و طراحی آن با یک شبکه
  • ایجاد و قالب بندی دکمه های رادیویی
  • ایجاد و قالب بندی یک منو

سطح: مقدماتی مدت زمان: 1 ساعت و 55 دقیقه نویسنده: Jen Kramer

لیست سرفصل های دوره آموزشی:

Twitter's Bootstrap is one of the most popular HTML/CSS/JavaScript frameworks for creating responsive websites. Here, Jen Kramer shows you how to add interactive elements like a thumbnail gallery, image carousel, or contact form using Bootstrap and a simple text editor. Plus, learn to style these features with CSS and add helpful JavaScript-based pop-ups and tooltips that enhance their usability. Along the way, you can test your Bootstrap prowess with a series of challenge videos.

Need help getting Bootstrap up and running? Check out Up and Running with Bootstrap 3. Topics include: Installing Bootstrap 3, Sublime Text 2, and jQuery Planning the thumbnail gallery Creating modal windows Creating an image carousel Linking images and adding captions Changing the carousel rotation Laying out and styling a contact form

Introduction 2m 43s Welcome 55s Using the exercise files 1m 8s Using the challenges 40s 1. Setting Up 9m 55s Installing Sublime Text 2 1m 15s Installing Bootstrap 3 4m 54s Installing jQuery 3m 46s 2. Creating a Thumbnail Gallery with Modal Pop-Ups 39m 29s Planning the thumbnail gallery 8m 41s Creating the thumbnail gallery grid layout 5m 38s Creating the modal windows 9m 32s Linking the thumbnails to the modal windows 5m 21s Enhancing the thumbnail layout with captions 3m 37s Challenge: Styling thumbnails and modals 1m 54s Solution: Styling thumbnails and modals 4m 46s 3. Creating an Image Carousel for the Homepage 33m 12s Planning the image carousel and prepping images 7m 56s Creating the image carousel 4m 6s Adding carousel navigation 4m 25s Adding captions to the carousel 3m 56s Adding and styling a carousel position indicator 4m 22s Customizing the carousel rotation interval and wrapping style 4m 56s Challenge: Create modal windows in your carousel 1m 28s Solution: Create modal windows in your carousel 2m 3s 4. Creating Forms 29m 33s Including a text input and styling it with a grid 7m 21s Creating and formatting radio buttons 2m 19s Creating and formatting a selection dropdown menu 1m 49s Adding a comments box and tooltips 5m 5s Adding a check box and using collapse to enhance usability 8m 14s Challenge: Styling the form 1m 22s Solution: Styling the form 3m 23s Conclusion 54s Next steps 54s

عنوان دوره: Lynda - Bootstrap 3 Adding Interactivity to Your Site حجم فایل: 386MB

آیا این نوشته را دوست داشتید؟
Lynda Bootstrap 3 Adding Interactivity to Your Site

پیشنهاد فرادرس