Bootstrap Most popular HTML, CSS, and JS framework for developing - - PowerPoint PPT Presentation

▶
bootstrap
SMART_READER_LITE
LIVE PREVIEW

Bootstrap Most popular HTML, CSS, and JS framework for developing - - PowerPoint PPT Presentation

Nov 05, 2023 33 likes •129 views

Bootstrap Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web About Bootstrap Designed for everyone, everywhere makes front-end web development faster and easier. It's made for folks

slide-1
SLIDE 1

Bootstrap

Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web

slide-2
SLIDE 2

About Bootstrap

  • Designed for everyone, everywhere
  • makes front-end web development faster and

easier.

  • It's made for folks of all skill levels, devices of all

shapes, and projects of all sizes.

  • One framework, every device.
  • Full of features
slide-3
SLIDE 3

What is Bootstrap?

  • Free collection of tools for creating awesome

websites & web applications

  • Contains HTML & CSS-based design templates for:
  • Typography
  • Forms
  • Buttons
  • Navigation
  • … other interface components such as menus, headers, & image

carousels

  • Designed to be mobile first
  • Is responsive
slide-4
SLIDE 4

Bootstrap topics and discussions

  • Each team will discuss from among these topics
  • Discussions will last for 15 to 20 minutes
  • Teams will highlight code that illustrate topics
  • Teams will give class time to interact with topic
slide-5
SLIDE 5

Grid system

Features Bootstrap 3 Grid System Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Max container width None (auto) 750px 970px 1170px Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Class prefix .col-xs- .col-sm- .col-md- .col-lg- Max column width Auto ~62px ~81px ~97px Gutter width 15px on each side of a column (i.e. 30px)

slide-6
SLIDE 6

Other grid utility classes

  • Visibility utility classes:
  • .visible-xs-*
  • Makes the element visible only on extra small devices having screen width

less than 768px. Hidden on others.

  • Hidden utility classes:
  • .hidden-xs
  • Hide the elements only on extra small devices having screen width less
  • than768px. Visible on others.
slide-7
SLIDE 7

Discussion topics/team (1)

  • Fixed Layout, Fluid Layout, Responsive Layout
  • Steven, Davis, Austin N, Shane
  • Typography
  • Austin W, Ed, Jared
  • Tables
  • Joseph, Stefan, Joshua
  • Lists & List Groups
  • Sean, Phil, Rafael
slide-8
SLIDE 8

Discussion topics/team (2)

  • Forms & Icons
  • Luke, Zac, Michael
  • Input Groups & Buttons, & Button Groups
  • Melissa, Mark, Patrick
  • Images & Media Objects
  • Sam, Nathan, Luwen
  • Progress Bars & Jumbotron
  • Mason, Kice
slide-9
SLIDE 9

Resources

  • http://joyofbootstrap.com/index.html
  • http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
  • http://getbootstrap.com/