Scribd Logo
Importer

Bienvenue sur Scribd !

  • Bootstrap Prog

    Transféré par

    Ashwini Patil
    39 vues7 pages
    The document contains code for 8 Bootstrap assignments demonstrating various Bootstrap components: 1) Pagination 2) Grouping panels 3) Labels with badges 4) Alerts with contextual classes 5) Wells of different sizes 6) Block level buttons of different styles and sizes

    Description originale:

    Titre original

    Bootstrap prog.docx

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    The document contains code for 8 Bootstrap assignments demonstrating various Bootstrap components: 1) Pagination 2) Grouping panels 3) Labels with badges 4) Alerts with contextual classes 5) Wells of different sizes 6) Block level buttons of different styles and sizes

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    39 vues7 pages

    Bootstrap Prog

    Transféré par

    Ashwini Patil
    The document contains code for 8 Bootstrap assignments demonstrating various Bootstrap components: 1) Pagination 2) Grouping panels 3) Labels with badges 4) Alerts with contextual classes 5) Wells of different sizes 6) Block level buttons of different styles and sizes

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    <!

    --Bootstrap 1st Assignment

    1. Write a program to demonstrate the pagination concept.

    Use a Bootstrap class to disable the first list item using Bootstrap.-->

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body>

    <div class="container">

    <h2>Pagination</h2>

    <ul class="pagination">

    <li class="disabled"><a href="#" >1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    </ul>

    </div>

    </body>

    </html>
    <!--Bootstrap 2nd Assignment

    2.Write a program to demonstrate how to group panels using Bootstrap.

    Create four panels with heading, content and footer sections.-->

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body>

    <div class="container">

    <h2>Panel Group</h2>

    <div class="panel-group">

    <div class="panel panel-default">

    <div class="panel-heading">Panel Header</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

    </div>

    <div class="panel panel-success">

    <div class="panel-heading">Panel Header</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

    </div>
    <div class="panel panel-info">

    <div class="panel-heading">Panel Header</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

    </div>

    <div class="panel panel-primary">

    <div class="panel-heading">Panel Header</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

    </div>

    </div>

    </div>

    </body>

    </html>

    <!--Bootstrap Assignment 4 labels with badges

    4. Write a program to demonstrate the use of labels with badges.-->

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>
    <body>

    <div class="container">

    <h1>Bootstrap Labels</h1>

    <h1>default lable <span class="label label-default">New</span></h1>

    <h2>success lable <span class="label label-success">New</span></h2>

    <h3>warning lable <span class="label label-warning">New</span></h3><br><br>

    <h1>Bootstrap Badges</h1>

    <a href="#">You Received New Message <span class="badge">5</span></a><br>

    <a href="#">Friend Request <span class="badge">10</span></a><br>

    <a href="#">Updates <span class="badge">2</span></a>

    </div>

    </body>

    <!--Bootstrap Assignment 6 alert with contextual class

    6. Write a program to demonstrate the use of Bootstrap alerts with contextual classes. -->

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body>

    <div class="container">

    <h1>Alerts with contextual classes</h1>


    <div class="alert alert-warning"><strong>Warning!</strong> This alert box indicates a warning that
    might need attention.</div>

    <div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive


    action.</div>

    <div class="alert alert-danger"><strong>Danger!</strong> Indicates a dangerous or potentially negative


    action.</div>

    <div class="alert alert-info"><strong>Info!</strong> Indicates a neutral informative change or action.

    </div>

    </body>

    <!--Bootstrap Assignment 7 Bootstrap well with different sizes

    7. Write a program to demonstrate the use of Bootstrap wells with different sizes.-->

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body>

    <div class="container">

    <h2>Well Size</h2>

    <div class="well well-sm">Small Well</div>

    <div class="well">Normal Well</div>

    <div class="well well-lg">Large Well</div>

    </div>

    </body>
    </html>

    <!--Bootstrap Assignment 8 Block level buttons

    8. Write a program to create block level bordered buttons with any four styles with

    different sizes using Bootstrap-->

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body>

    <div class="container">

    <h2>Block Level Buttons</h2>

    <button type="button" class="btn btn-primary btn-block">Button 1</button>

    <button type="button" class="btn btn-default btn-block">Button 2</button>

    <h2>Large Block Level Buttons</h2>

    <button type="button" class="btn btn-info btn-lg btn-block">Button 1</button>

    <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

    <h2>Small Block Level Buttons</h2>

    <button type="button" class="btn btn-success btn-sm btn-block">Button 1</button>

    <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>

    <h2>Extra Small Block Level Buttons</h2>


    <button type="button" class="btn btn-warning btn-xs btn-block">Button 1</button>

    <button type="button" class="btn btn-default btn-xs btn-block">Button 2</button>

    </div>

    </body>

    </html>

    Vous aimerez peut-être aussi