Webshake with Bootstrap
Mr.V.Harikrishnan
Asst.Prof of BCA
K.S.Rangasamy College of Arts and Science (Autonomous)
Tiruchengode-637215
Mobile: 9942351377
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Bootstrap: A Free Front-end Framework for Developing Responsive Websites, Study notes of Operating Systems
An overview of Bootstrap, a popular HTML, CSS, and JavaScript framework used for creating responsive websites. It covers the benefits of using Bootstrap, introduces important HTML tags, explains the box model, and discusses Cascading Stylesheets (CSS). It also provides instructions on how to get Bootstrap and lists various components that will be covered in the session.
Typology: Study notes
2019/2020
1 / 27
This page cannot be seen from the preview
Don't miss anything!
Related documents
Partial preview of the text
Download Bootstrap: A Free Front-end Framework for Developing Responsive Websites and more Study notes Operating Systems in PDF only on Docsity!
Webshake with Bootstrap
Mr.V.Harikrishnan Asst.Prof of BCA K.S.Rangasamy College of Arts and Science (Autonomous) Tiruchengode- 637215 [email protected] (Official) [email protected] (Personal) Mobile: 9942351377
Bootstrap
Free Front-end Framework Most popular HTML, CSS, and JavaScript framework To develop Responsive Websites Sites which automatically adjust themselves to look good on all devices, from small phones to large desktops Includes HTML and CSS based design templates for Typography Forms Buttons Tables Navigation Modals etc
Two Important HTML Tags
- To group elements - To identify a portion in a element (Inline)
Box Model
3 Important things in Block Elements Border Margin Padding Content
Cascading Stylesheet (CSS)
Internal CSS Code will be added in the HTML Document itself 7 HTML Code
Hello World
Inline StylesHello World
EmbeddedSample Page
Hello World
Welcome to Sample Page
Cascading Stylesheet (CSS)
External CSS – style.css p{ font-size:14pt; color:#f00; } h 3 { color:#0f0; } HTML File
Sample Page
Hello World
Welcome to Sample Page
Cascading Stylesheet (CSS)
Class Concept CSS .red{ color:#f00; } .green { color:#0f0; } .blue { color:#00f; } HTML File
Sample Page
Hello World
Welcome to Sample Page
Where to get Bootstrap?
Download Bootstrap from getbootstrap.com
Include Bootstrap from a Content Delivery Network (CDN)
CSS File Script Files
Containers
To hold elements together Two types of Containers Container Container-Fluid
** ... .... ... **
Text Colors
Contextual Classes for Text Colors: text-muted, text-primary, text-success, text-info, text-warning, text-danger, text-secondary, text-white, text-dark, text-body These classes can be applied to any text (paragraph, hyperlinks, headings, etc)
Hello
Grid Basics
Page Width is seen as 12 columns (Responsive) across the page You can group the columns together to create wider columns The Bootstrap 4 grid system has five classes .col- (extra small devices - screen width less than 576 px) .col-sm- (small devices - screen width equal to or greater than 576 px) .col-md- (medium devices - screen width equal to or greater than 768 px) .col-lg- (large devices - screen width equal to or greater than 992 px) .col-xl- (xlarge devices - screen width equal to or greater than 1200 px)
Grid Example
Create Row and add Cols
Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 1 Column 4
Images
Images classes: rounded, rounded-circle, img-thumbnail Alignment: float-left, float-right, use two classes to center align(mx-auto and d-block) Automatic Size Adjustment: img-fluid
Buttons
different styles of buttons ( btn, btn-primary, btn-secondary, btn- success, btn-info, btn-warning, btn btn-danger, btn-dark, btn-light, btn-link ) 20
Hello Click Me Click Me