Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta http-equiv="Content-Style-Type" content="text/css">
- <title>Bootstrap Demo</title>
- <meta name="Generator" content="Cocoa HTML Writer">
- <meta name="CocoaVersion" content="1894.3">
- <style type="text/css">
- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
- </style>
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
- <link rel="stylesheet" href="css/bootstrap.min.css">
- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
- <script type="text/javascript" src="bootstrap_demo.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </head>
- <body>
- <div class="container">
- <h1>BootStrap Demo</h1>
- </div>
- <div class="container">
- <h3>Checkboxes</h3>
- <div class="checkbox">
- <input id="check1" type="checkbox" class="styleid">
- <label for="check1">
- Sunday
- </label>
- </div>
- <div class="checkbox">
- <input id="check2" type="checkbox" class="styled" checked>
- <label for="check2">
- Monday
- </label>
- </div>
- <div class="checkbox">
- <input id="check3" class="styled" type="checkbox">
- <label for="check3">
- Tuesday
- </label>
- </div>
- <div class="checkbox">
- <input id="check4" class="styled" type="checkbox" checked>
- <label for="check4">
- Wednesday
- </label>
- </div>
- <div class="checkbox">
- <input id="check5" class="styled" type="checkbox">
- <label for="check5">
- Thursday
- </label>
- </div>
- <div class="checkbox">
- <input id="check6" class="styled" type="checkbox" checked>
- <label for="check6">
- Friday
- </label>
- </div>
- <div class="checkbox">
- <input id="check7" class="styled" type="checkbox">
- <label for="check7">
- Saturday
- </label>
- </div>
- </div>
- <div class="container">
- <!-- Button to trigger modal -->
- <a href="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Launch demo Modal</a>
- <!-- Modal -->
- <div class="modal fade" id="myModal1">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h3>A title for my modal</h3>
- </div>
- <div class="modal-body">
- <p>Content Content Content Content</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <div class="container">
- <h3>Dropdown</h3>
- <div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">Dropdown Button</button>
- <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <a class="dropdown-item" href="#">Action 1</a>
- <a class="dropdown-item" href="#">Action 2</a>
- <a class="dropdown-item" href="#">Action 3</a>
- </div>
- </div>
- </div>
- <div class="container">
- <h2>Basic Progress Bar</h2>
- <div class="progress">
- <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
- <span class="sr-only">70% Complete</span>
- </div>
- </div>
- </div>
- <!--<script>-->
- <!-- var progressBar = $('.progress-bar');-->
- <!-- var progressNumber = 0;-->
- <!-- setInterval(function() {-->
- <!-- progressNumber++;-->
- <!-- progressBar.css('width', progressNumber + '%');-->
- <!-- progressBar.attr('aria-valuenow', progressNumber);-->
- <!-- }, 200);-->
- <!--</script>-->
- <div class="container">
- <div class="alert alert-success alert-dismissable">
- <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
- Success! Message was sent.
- </div>
- </div>
- <style>
- .alert{
- display: none;
- }
- </style>
- <script>
- $(document).ready(function() {
- $('button').click(function() {
- $('.alert').show()
- })
- });
- </script>
- <div class="container">
- <h3>Popover Example</h3>
- <a href="#" data-toggle="popover" title="Proclivity (noun)" data-content="A tendency to choose or do something regularly; an inclination or predisposition toward a particular thing.">Proclivity</a>
- </div>
- <script>
- $(document).ready(function() {
- $('[data-toggle="popover"]').popover();
- });
- </script>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement