Bootstrap İle (responsive) Duyarlı Web Tasarımı Geliştirme ve Uyum Eğitimi

KURS İÇERİĞİ

Bootstrap İle (responsive) Duyarlı Web Tasarımı Geliştirme ve Uyum Eğitimi

PROGRAMIN AMAÇLARI

Bootstrap ile Responsive (Duyarlı) Web Tasarımı Geliştirme ve Uyum Eğitimi kurs programını bitiren bireyin;

1. Bootstrap framework’ü kullanması,

2. Responsive yapıyı kullanması,

3. Bootstrap framework bileşenlerini kullanması,

4. Bootstrap framework pluginlerini kullanması,

5. Responsive(duyarlı) web sitesi oluşturması amaçlanmaktadır. 

KURS PLANI

Bootstrap İle (responsive) Duyarlı Web Tasarımı Geliştirme ve Uyum Eğitimi

1. Bootstrap nedir? Responsive tasarım nedir?

  1.1. Bootstrap indirme ve kurulum

  1.2. Dosyaların projeye dahil edilmesi

  1.3. Grid yapısı

  1.4. Breakpoints, grid özellikleri

        Equal-width, Variable width content, Stacked to horizontal, Mix and match,

  1.5.  Alignment, Column wrapping, Reordering , Offsetting columns,

  1.6. Nesting, Grid uygulamaları

  1.7. Grid yapısı örnek uygulamalar

 2. Medya Nesneleri

 2.1. Nesting, Alignment, Order

2.2. Media list

2.3. Resimler

2.4. Image thumbnails, Aligning images

 2.5. img-rounded, img-circle, img-thumbnail

   2.6. Resim uygulamaları

3. Tablolar

3.1. Table head options, Striped rows

3.2. Bordered table, Borderless table, Hoverable rows

3.3. Responsive tables – Table classes

Tablo örnekleri yapımı

4. Uyarı Kutuları (Alert)

  4.1. Link color

  4.2. JavaScript behavior

  5. Badges ( Rozetler)

 5.1. Pill badges

  5.2. Links

   6.  Breadcrumb

 6.1. Örnek uygulama

MODÜL 2: BOOTSTRAP FRAMEWORK BİLEŞEN VE PLUGİN KULLANIMI

7. Butonlar

7.1. Button tags

7.2. Outline buttons, Sizes

7.3. Active state, Button plugin

7.4. Checkbox and radio buttons

7.5. Button group

8. Cards

8.1. Titles, text, and links

8.2. Images, List groups, Kitchen sink, Header and footer, Sizing

8.3. Text alignment, Navigation

8.4. Card styles

8.5. Border, Card groups

8.6. Card decks

  9. Carousel Yapımı

 9.1. Slides only

 9.2. With controls

 9.5. Crossfade

 9.3. With indicators

  9.4. With captions

  9.6. örnek resimlerle Carousel uygulaması

10. Collapse 

 10.1. Multiple targets

 10.2. Accordion example

 10.3. JQuery ile collapse uygulaması

 11. Dropdowns

 11.1. Split button

 11.2. Sizing, Directions, Dropright, Dropleft

  11.3. Menu items

 11.4. Active, Disabled

 11.5. Menu alignment

 11.6. Menu content, Forms

12. Forms

12.1. Form controls

12.2. Sizing, Readonly, Readonly plain text

 12.3. Range Inputs

12.4. Checkboxes and radios

12.5. Form grid, Horizontal form, Auto-sizing

12.6. Inline forms

12.7. Disabled forms

12.8. Validation

12.9. Browser defaults

12.10. Select menü

 Örnek Form uygulaması

13. Input group

 13.1. Sizing, Checkboxes and radios

 13.2. Multiple inputs, Button addons

13.3. Buttons with dropdowns

 13.4. Segmented buttons

   13.5. Custom file input

14. Jumbotron

15. List group

16. Jumbotron uygulama örnekleri

17. Modal

 17.1. Modal components

 17.2. Varying modal content

 17.3. Optional sizes

 Modal uygulama örnek

18. Navs

 18.1. Horizontal alignment, Vertical

 18.2. Tabs, Pills, Fill and justify

18.3. Tabs with dropdowns, Pills with dropdowns

19. Navbar

 19.1. Brand, Nav

 19.2. Forms, Text

 19.3. Color schemes

 19.4. Containers, Placement

 19.5. Responsive behaviors

 19.6. External content

20. Pagination

 20.1. icons

 20.2. Disabled and active states, Sizing

 20.3. Alignment

 21. Popovers

 22. Progress, Labels, Height, Backgrounds, Multiple bars, Striped

KURS MODÜLÜ

Bootstrap İle (responsive) Duyarlı Web Tasarımı Geliştirme ve Uyum Eğitimi

MODÜL ADI

KAZANIM

ÖĞRENME KAZANIMLARI

SÜRE

BOOTSTRAP FRAMEWORK KULLANIMI VE WEB SAYFASINA ENTEGRE ETME

Bootstrap framework ile web tasarım yazılımı geliştirmek için gerekli ayarlamaları gerçekleştirir.

  • Bootstrap framework’ü kullanır.
  • Responsive yapıyı kullanır.

16

BOOTSTRAP FRAMEWORK BİLEŞEN VE PLUGİN KULLANIMII

Bootstrap Framework bileşen ve pluginleri kullanarak web sayfası modellemesi gerçekleştirir.

  • Bootstrap framework bileşenlerini kullanır.
  • Bootstrap framework pluginlerini kullanır.
  • Responsive(duyarlı) web sitesi oluşturur

32

TOPLAM KURS SÜRESİ (Ders Saati):

48

 

KURS ANİMASYONU

Bootstrap İle (responsive) Duyarlı Web Tasarımı Geliştirme ve Uyum Eğitimi