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

آموزش ایجاد رابط کاربری وب با Bootstrap 4

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

بوت استرپ، یکی از کامل ترین چارچوب ها، برای طراحی رابط های ظریف، قدرتمند برای صفحات وب حرفه ای طراحی شده است. Bootstrap از طراحی واکنش گرا با تنظیم طرح بندی صفحه وب پشتیبانی می کند. در این دوره با نحوه تغییر Bootstrap 4 با کمک پلاگین ها برای ساخت رابط کاربری سفارشی و قدرتمند، پیاده سازی سیستم شبکه موبایلی Bootstrap، استفاده از کلاس های بوت استرپ و غیره آشنا می شوید.

سرفصل:

  • معرفی دوره
  • بررسی آخرین ویژگی های بوت استرپ
  • مهاجرت به بوت استرپ 4
  • به کارگیری بوت استرپ در یک پروژه وب
  • سفارش سازی فریمورک
  • استایل اپلیکیشن
  • پیاده سازی سیستم شبکه موبایلی Bootstrap
  • HTML Image Elements
  • اعمال Bootstrap Helper Classes
  • ایجاد اپلیکشن واکنش گرا
  • استفاده از ابزارهای واکنش گرا
  • ایجاد منوها و ناوبری
  • الگوهای ناوبری و بهترین روش ها
  • افزودن Navigation Bar
  • افزودن Responsive Sidebar
  • کار با نوارهای ناوبری و دکمه های منو
  • ایجاد فرم ها و ورودی ها
  • استفاده از Bootstrap Toggle
  • ایجاد فایل های ورودی با fileinput.js
  • تشخیص مرورگر
  • و غیره
آیا این نوشته را دوست داشتید؟
Building Web UIs with Bootstrap 4 [Video] Publisher:Packtpub Author:Vedran Cindric Duration:4 hours 9 minutes

Explore the full potential of Bootstrap to build highly customized, responsive, and mobile-first applications on the web.
Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout.
This video course will begin by showing you how to modify Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. On your way, you will discover several techniques that can be applied to your own web projects to build sleek, beautiful UIs and customize them. You will implement the Bootstrap mobile-first grid system, use the classes Bootstrap has in place to add responsiveness and aesthetic touches to image elements and apply handy helper classes like contextual text and background colors, floating and centering elements and clearing floated elements. Finally, you will learn how to show or hide a page element on the basis of browser screen size using Bootstrap’s responsive utility classes.
By the end of this video, you will explore the fullest potential of Bootstrap by building highly customized, responsive and mobile-first applications. You will also modify, and integrate bootstrap with jQuery plugins to achieve optimal results for your web projects.
All the code and supporting files for this course are available on Github at https://github.com/PacktPublishing/Building-Web-UIs-with-Bootstrap-4-V
Style and Approach
This course will follow a step-by-step approach to ensure that you create advanced web UIs with Bootstrap 4.
Released: Friday, August 31, 2018
Bootstrap 4 – A Rocket Start
The Course Overview
Exploring the Latest Features in Bootstrap
Migrating to Bootstrap 4
Including Bootstrap in a Web Project
Customizing Your Framework
Digging into the Themes
Styling Your App
Implementing the Bootstrap Mobile-First Grid System
Incorporating HTML Image Elements
Applying Bootstrap Helper Classes
Making Your App Responsive
Using Responsive Utilities
Creating Menus and Navigation
Navigation Patterns and Best Practices
Working with Dynamic Tabs and Pills
Adding a Navigation Bar
Adding a Responsive Sidebar
Working with Navigation Bars and Menu Buttons
Creating a Compelling Bootstrap 4 UI
Creating Forms and Inputs
Using Bootstrap Toggle
How to Extend Your Select Elements with Bootstrap Select
Adding Input Sliders with Bootstrap-Slider
Employing the Flexbox Grid to Create Equal-Height Columns
Creating File Inputs with fileinput.js
Adding Dates and Times to Your Inputs with Bootstrap-Datetimepicker
Choose Date Ranges with Date Range Picker
Advanced Bootstrap Components
Creating Masonry Layouts with Bootstrap
Adding an Off-Canvas Menu
Using Bootstrap Scrollspy to Add Scroll Tracking
Creating Sliders with Bootstrap Carousel
Native Form Validation with Bootstrap
Reviewing Up Development with jQuery Plugins
Browser Detection
Display Images Using Bootstrap Lightbox
Improving Our Tables with DataTables
Programmatically Toggling Modals
Using Typeahead

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