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

آموزش Bootstrap 4 برای مبتدیان - ایجاد 5 وب سایت از ابتدا

دسته بندی ها: آموزش CSS ، آموزش HTML ، آموزش طراحی وب ، آموزش بوت استرپ (Bootstrap) ، آموزش های Packtpub

این دوره از Bootstrap 4.0.0 بتا، آخرین نسخه استفاده می کند. در مورد Bootstrap Grid و تغییرات جدیدی که استفاده از آن را آسان تر می کند یاد بگیرید. در این دوره با نحوه استفاده از ناوبارهای Bootstrap 4، ایجاد محتوا در جداول، لیست ها و کارت ها و غیره آشنا می شوید. بوت استرپ یک فریمورک وب برای وب سایت ها و اپلیکیشن های وب است که شامل الگوهای طراحی مبتنی بر HTML و CSS برای تایپوگرافی، فرم ها، دکمه ها، ناوبری، و سایر اجزای رابط، و همچنین پسوند جاوا اسکریپت اختیاری است. شما از این که وب سایت های مدرن را با استفاده از Bootstrap به آسانی ایجاد می کنید، شگفت زده خواهید شد.

سرفصل:

  • معرفی Bootstrap
  • بوت استرپ چیست؟
  • معرفی  Bootstrap 4
  • ویژگی های Bootstrap 4
  • شروع کار با بوت استرپ
  • راه اندازی بوت استرپ در کامپیوتر
  • کانتینرهای بوت استرپ برای نگهداری عناصر
  • Bootstraps grid
  • Bootstrap Grid columns
  • Bootstrap Column Auto Sizing
  • تصاویر واکنش گرا Bootstrap
  • Bootstrap JumboTron
  • Bootstrap Buttons
  • ساختار بوت استرپ
  • جداول بوت استرپ
  • ناوبری کامپوننت های بوت استرپ
  • طراحی Index Page Layout
  • ایجاد قالب بوت استرپ
  • ایجاد ناوبار بوت استرپ
  • ایجاد صفحه اصلی سایت
  • ایجاد فرم تماس
  • افزودن فوتر
  • و غیره
Bootstrap 4 for Beginners - Build 5 Websites from Scratch [Video] Publisher:Packtpub Author:Laurence Svekis Duration:10 hours 39 minutes

Explore Bootstrap 4 and learn how to apply layouts, use components, and employ utilities for rapid website design and development
This course uses Bootstrap 4.0.0-beta, the latest version. Learn about the Bootstrap Grid and new changes that make it easier to use. Find out how to use Bootstrap 4 navbars by making them responsive. Structure content in tables, lists, and cards. Make text stand out with amazing Bootstrap 4 utilities. Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app, a responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Add to the library and then you are ready to bring the power of Bootstrap into your web pages! It's simple and easy to use and facilitates web design and development. This is all available within Bootstrap. You will be amazed at how easy it is to create modern websites using Bootstrap.
Style and Approach
This course will show you how to build websites with Bootstrap classes. Learn about and see Bootstrap components and utilities in action! On completion of this course, you will have the knowledge to use Bootstrap within your own projects. Lessons include the source code, code snippets, and exercises to help you learn Bootstrap quickly.
Released: Monday, September 17, 2018
Introduction to Bootstrap
Welcome to Bootstrap 4
What is Bootstrap introduction to Bootstrap 4
New Bootstrap 4 Features
Course editor and resources overview
Getting Started with Bootstrap
Setup Bootstrap on your computer
Try out Bootstrap adding classes
Bootstrap Containers to Hold Elements
Media sizes in Bootstrap
Bootstraps grid
Bootstrap Grid columns
Bootstrap Column Auto Sizing
Grid Column Order and spacing
nested rows within rows
Bootstrap Rapid Design
standout text typography
List group items
Bootstrap responsive images
Bootstrap JumboTron
Badges in Bootstrap
Bootstrap Buttons
Buttons in Bootstrap
Bootstrap Button Groups
Button Radio Buttons and check boxes
Bootstrap Common Components and utilities
Bootstrap Progress bar
Font and Background color
Bootstrap Utility Classes
Bootstrap structure
Bootstrap tables
Bootstrap Cards
Card Structure and grouping
Bootstrap Forms Grid
Input Group Addons
Form Select and File Input
Drop down menu Bootstrap
Navigation Bootstrap component
Bootstrap Nav Component
Bootstrap NavBar Responsive
Navbar options Bootstrap
Bootstrap interactive components
Bootstrap Alerts
Popover and Tooltip
Collapse and show elements
Bootstrap Modals
Bootstrap Image Carousel
Conclusion
Bootstrap conclusion
Section Overview Website 1
Rapid Web development create a quick website
Section Preview Website 2
Build a Default Bootstrap template
Build responsive navbar
Responsive NavBar Bootstrap 4
Full Height Section
Build section
Bootstrap Buttons Section
Bootstrap 4 Cards in Action
Bootstrap 4 Forms
Add new section with background image
Footer Styling Bootstrap 4
Bootstrap ScrollSpy
Bonus jQuery Animate Method
Website Build Overview
Multiple Page Image header Bootstrap 4 website
Section Preview Website 3
Project Introduction
Create Bootstrap template
Design Website Structure
Setup NavBar Structure
Create a Responsive Navbar Bootstrap 4
Build image Background Section
Bootstrap 4 Footer Structure
Adding Font Awesome Icons
Design Home Page
Build Home Page
Design Planning About Page
Bootstrap List and Grid about Page
Plan and Design Services Page
Services Page using Cards
Setup Contact Page Design
Build Contact Form Bootstrap 4
Multiple Page Bootstrap 4 Website review
Build Multiple Page Website from scratch portfolio site
Section Preview Website 4
Project Introduction
Quick Bootstrap 4 Setup
Build Bootstrap Page Structure
Build Bootstrap Responsive NavBar
Build Footer Structure
Build Footer at Font Awesome
Complete WebPage Layout
Design Index Page Layout
Setup Bootstrap 4 Grid
Home Page Carousel
Add Call to Action Section
Bootstrap 4 Cards
Plan about Page Design
Collapse Elements Build about Page
Plan and Design Portfolio Page
Bootstrap Cards Portfolio Page
Plan Contact Page
Build Contact Form
Webpage overview and Review
Bootstrap Parallax Style Single Page Website
Section Preview Website 5
Basic Bootstrap 4 Template Creation
Create Bootstrap NavBar
Header Section
Build another Section
Add About Me Section
Bootstrap Cards and Grid
Create a contact form
Add a Footer
Bonus animate with jQuery
Project Overview

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