Bootstrap Page Components Training Videos for beginners - PowerPoint PPT Presentation

About This Presentation
Title:

Bootstrap Page Components Training Videos for beginners

Description:

Bootstrap page components online tutorial explains major bootstrap topics like labels and badges,list groups and panels,button groups,navbars,progress bars,pagination concepts briefly also access bootstrap experts designed online.video,classroom free resources for beginners. – PowerPoint PPT presentation

Number of Views:41

less

Transcript and Presenter's Notes

Title: Bootstrap Page Components Training Videos for beginners


1
Bootstrap Page Components Training Videos for
Beginners by
2
Highlights
  • Labels and Badges
  • List Groups Panels
  • Jumbotron and Page Header
  • Button Groups, Navs, Progress Bars
  • Pagination

3
Labels and Badges
  • Badges are numerical indicators of how many items
    are associated with a link.
  • Badges will be created by ltspan gt elements of
    .badge class.
  • Syntax lta href"gtArticles ltspan class"badge"gt3
    lt/spangtlt/agtltbrgt // 3 is badge
  • Badges can also be used inside buttons.
  • Syntax ltbutton type"button" class"btn
    btn-primary"gt Primary 
    ltspanclass"badge"gt7lt/spangtlt/buttongt
                                          

4
Labels and Badges
  • Labels are used to provide additional information
    about something.
  • Ex Articles
  • Label elements created using ltspangt elements of
    .label class.
  • Syntax lth1gtExample ltspan class"label
    label-default"gtNewlt/spangtlt/h1gt
  • Label class  followed by any one of the six
    contextual classes 1.label-default, 2.label-primar
    y, 3.label-success, 4.label-info, 5.label-warningo
    r 6.label-danger

NEW
5
List Groups Panels
  • Unordered list groups create with .list-group
    class and list items create with .list-group-item
    class.
  • Syntax ltul class"list-group"gt
    ltli class"list-group-item"gtitem1lt/ligt lt/ulgt
  • List groups can also be created with linked
    items, badges.
  • panel in bootstrap is a bordered box with some
    padding around its content.
  • Panels would be create with the .panel class, and
    content inside the panel has a .panel-body class.
      

6
List Groups Panels
  • .panel-heading class adds a heading to the panel.
  • .panel-footer class adds a footer to the panel.
  • Panel groups create with .panel-group class which
    enclose in ltdivgt tags.
  • Syntax ltdiv class"panel panel-group"gt
      ltdiv class"panel-body"gtA Basic Panellt/divgt
    ltdiv class"panel-heading"gtPanel Headinglt/divgt
    ltdiv class"panel-body"gtPanel Contentlt/divgt
     ltdiv class"panel-footer"gtPanel Footerlt/divgt
    lt/divgt

7
Jumbotron and Page Header
  • Jumbotron is a box use for calling extra
    attention to some special content.
  • jumbotron box allows HTML code and bootstrap
    classes, elements.
  • It can be created using ltdivgt tags with
    .jumbotron class.
  • Syntax ltdiv class"jumbotron"gt lth2gt
    Bootstraplt/h2gt ltpgt Basicslt/pgt lt/divgt
  • Page header can be created using ltdivgt tags with
    .pageheader class.
  • Syntax ltdiv class"page-header"gt  lth1gtPage
    Header introductionlt/h1gt lt/divgt  

8
Button Groups, Nav, Progress Bars
  • Bootstrap allows to group a chain of buttons
    together.
  • Syntax ltdiv class"btn-group"gt   ltbutton type
    "button" class"btn btn-primary"gtSonylt/buttongt  
    ltbutton type"button" class"btn
    btn-primary"gtLGlt/buttongtlt/divgt
  • Nav is a navigation header that is placed at the
    top of the page.
  • progress bar can be used to show a user how far
    along he/she is in a process.
  • Contextual classes are used to provide progress
    bars with colors.
  • Syntax ltdiv class"progress"gt   ltdiv class"prog
    ress-bar" role"progressbar" aria-value now"70gt
    lt/divgt

9
Pagination
  • Pagination means assigning sequence of numbers
    assigned to pages in a website.
  • By clicking on respective numbers users will be
    redirected to that web page.
  • Syntax ltul class"pagination"gt   ltligtlta href"
    "gt1lt/agtlt/ligt   ltligtlta href""gt2lt/agtlt/ligt   lt
    ligtlta href""gt3lt/agtlt/ligt lt/ulgt

10
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
11
Thank you
Thank You for Watching Bootstrap Page Components
Training Videos for Beginner by
http//www.courseing.com
Write a Comment
User Comments (0)
About PowerShow.com