Introduction to Bootstrap: A Framework for Web Development

Slide Note

Bootstrap is a free front-end framework designed to streamline web development by providing HTML and CSS templates for various elements such as typography, forms, buttons, tables, navigation, modals, and more. Created by Mark Otto and Jacob Thornton at Twitter, Bootstrap simplifies styling websites through predefined classes and CSS rules. This versatile framework enhances the design process, making it easier to create consistent and visually appealing websites.

daycensa Follow

Uploaded on Nov 18, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Bootstrap A framework for CSS SE-2840 Dr. Mark L. Hornick 1

What is Bootstrap? Bootstrap is a free front-end framework for faster and easier web development, including HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and more Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub. In June 2014 Bootstrap was the No.1 project on GitHub! It is not the only such framework; another is Materialize by Google (2015). SE-2840 Dr. Mark L. Hornick 2

Bootstrap enhances HTML and CSS to make styling websites easier and consistent For example, Bootstrap provides 7 styles of Buttons: Bootstrap uses predefined HTML classes (along with predefined CSS rules) to provide this styling SE-2840 Dr. Mark L. Hornick 3

Additional Bootstrap button classes Bootstrap provides four button size classes and classes to indicate active (pressed) or disabled (unclickable) states: SE-2840 Dr. Mark L. Hornick 4

Examples from w3schools.com SE-2840 Dr. Mark L. Hornick 5

To use 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"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/ crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p class="text-info bg-info" >This is some text</p> </div> </body> </html> Enclose the entire web page content in a <div> (or <section>) that uses the predefined container fluid class SE-2840 Dr. Mark L. Hornick 6

Bootstrap also gives you the ability to easily create responsive designs Responsive web sites automatically adjust themselves to look good on all devices, from small phones to large desktops. SE-2840 Dr. Mark L. Hornick 7