Scribd Logo
Upload

Welcome to Scribd!

  • Mohammad Abdullah - , 1

    Uploaded by

    mohamad mahmoud
    16 views5 pages
    The document provides instructions for setting up Bootstrap along with jQuery to create a one page website with navigation and other components. It describes how to load Bootstrap via CDN or locally, include jQuery, load Bootstrap JavaScript, and provides an example HTML page code that implements a navigation bar, form, and table using Bootstrap components.

    Original Description:

    Original Title

    91800104109 MOHAMMAD ABDULLAH_,1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for setting up Bootstrap along with jQuery to create a one page website with navigation and other components. It describes how to load Bootstrap via CDN or locally, include jQuery, load Bootstrap JavaScript, and provides an example HTML page code that implements a navigation bar, form, and table using Bootstrap components.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views5 pages

    Mohammad Abdullah - , 1

    Uploaded by

    mohamad mahmoud
    The document provides instructions for setting up Bootstrap along with jQuery to create a one page website with navigation and other components. It describes how to load Bootstrap via CDN or locally, include jQuery, load Bootstrap JavaScript, and provides an example HTML page code that implements a navigation bar, form, and table using Bootstrap components.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Setup Bootstrap along with jQuery and create one page

    using navigation and other components.

     Setup Boostrap
    1- Create an HTML page
    2- Load Bootstrap via CDN or host it locally
    3- Include jQuery
    4- Load Bootstrap JavaScript
    5- Put it all together

     Adding jQuery to Your Web Pages

    There are several ways to start using jQuery on your web site. You can:

     Download the jQuery library from jQuery.com


     Include jQuery from a CDN, like Google

    create one page using navigation and other


    components.

    Code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->


    <link href="css/bootstrap.min.css" rel="stylesheet">

    1|Page
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5
    elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the
    page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/
    3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/
    1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>

    .box { border:1px solid grey;


    background-color:#d3d3d3;

    </style>
    </head>
    <body>

    <div class="navbar navbar-default">

    <div class="container">

    <div class="navbar-header">

    <a href="" class="navbar-brand">My Website</a>

    <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-


    collapse">

    <span class="sr-only">Toggle navigation</span>

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

    </button>
    </div>

    2|Page
    <div class="collapse navbar-collapse">

    <ul class="nav navbar-nav">

    <li class="active"><a href="">Page 1</a></li>

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

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

    </ul>

    </div>

    </div>

    </div>

    <h1>Hello, world!</h1>
    <div class="container">

    <form class="form-horizontal" role="form">

    <div class="form-group">
    <label for="email">Email Address</label>
    <input class="form-control" type="email" name="email"
    placeholder="Your email" />

    </div>

    <div class="form-group">

    <label for="password">Password</label>
    <input class="form-control" type="password" name="password"
    />

    </div>

    <input type="submit" class="btn btn-warning" value="Login" />

    </form>

    3|Page
    <table class="table table-striped table-bordered table-hover">

    <tr class="success">
    <th>
    Name
    </th>
    <th>
    Age </th>
    </tr>

    <tr>
    <td class="danger">
    Rob
    </td>
    <td>
    33
    </td>
    </tr>

    <tr>
    <td>
    Jenny
    </td>
    <td>
    35
    </td>
    </tr>
    <tr>
    <td>
    Rob
    </td>
    <td>
    33
    </td>
    </tr>
    <tr>
    <td>
    Jenny
    </td>
    <td>
    35
    </td>

    4|Page
    </tr>
    <tr>
    <td>
    Rob
    </td>
    <td>
    33
    </td>
    </tr>

    <tr>
    <td>
    Jenny
    </td>
    <td>
    35
    </td>
    </tr>
    </table>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
    jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files
    as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    5|Page

    You might also like