Scribd Logo
Upload

Welcome to Scribd!

  • Bootstrap Modals: Modals - HTML

    Uploaded by

    ssss
    13 views5 pages
    This document is a code sample that demonstrates how to use Bootstrap modals. It includes the necessary HTML, CSS, and JavaScript to create a basic website with a navbar that links to different content sections on the page. When clicked, the navbar links smoothly scroll the page to the corresponding content section. The document provides a template for building a website using Bootstrap components like the navbar and modals.

    Original Description:

    1

    Original Title

    1 (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
    This document is a code sample that demonstrates how to use Bootstrap modals. It includes the necessary HTML, CSS, and JavaScript to create a basic website with a navbar that links to different content sections on the page. When clicked, the navbar links smoothly scroll the page to the corresponding content section. The document provides a template for building a website using Bootstrap components like the navbar and modals.

    Copyright:

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

    Bootstrap Modals: Modals - HTML

    Uploaded by

    ssss
    This document is a code sample that demonstrates how to use Bootstrap modals. It includes the necessary HTML, CSS, and JavaScript to create a basic website with a navbar that links to different content sections on the page. When clicked, the navbar links smoothly scroll the page to the corresponding content section. The document provides a template for building a website using Bootstrap components like the navbar and modals.

    Copyright:

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

    Bootstrap Modals: modals.

    html
    !
    <!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, initial-


    scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <!-- 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;

    .large {

    font-size:3000%;

    color:red;

    #div1 {

    background-color:blue;

    #div2 {

    background-color:red;

    #div3 {

    background-color:green;

    .contentDiv {

    height:800px;

    </style>

    </head>

    <body data-spy="scroll" data-target=".navbar-collapse">

    <div class="navbar navbar-default navbar-fixed-top">

    <div class="container">

    <div class="navbar-header">

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

    <button type="button" class="navbar-toggle" data-


    toggle="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>

    <div class="collapse navbar-collapse">


    <ul class="nav navbar-nav">

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

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

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

    </ul>

    </div>

    </div>

    </div>

    <h1>Hello, world!</h1>

    <div class="container">

    <div id="div1" class="contentDiv">Content</div>

    <div id="div2" class="contentDiv">Content</div>

    <div id="div3" class="contentDiv">Content</div>

    </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>

    You might also like