CIS 526
CSS & Bootstrap
Image Source: Imgur
Cascading Style Sheets
- First proposed in 1994
- Style sheets had existed since the 1980s with SGML
- Many standards, slow adoption
- Browsers don't have uniform support
- Modular standard; rules build on lower level modules
Advantages?
Disadvantages?
CSS Frameworks
- Writing CSS by hand is time consuming
- Standard look-and-feel desired
- Focus on functionality first
- Akin to drag-and-drop GUI creation
- (Hopefully) well written, documented and supported
Image Source: Wikipedia
Bootstrap
- Originally called "Twitter Bootstrap"
- Written to simplify and standardize front-end web development
- Focus on front-end, mobile-first, responsive design
- Version 3 is standard, uses 12-column grid system
- Version 4 is complete rewrite, adds Flexbox for columns
Reset Normalize
- Browsers have different defaults
- Use CSS to reset all of those to standard defaults
- Normalize.css does better by preserving useful defaults while updating bad ones
- Less clutter, well documented
- https://necolas.github.io/normalize.css/
Using Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrap...">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/..."></script>
<script src="https://cdnjs.cloudflare.com/..."></script>
<script src="https://maxcdn.bootstrapcdn.com/..."></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
<div class="container">
<h1>Hello, world!</h1>
<div style="width: 100%; background: grey">
<p>Some text for content</p>
</div>
</div>
<div class="container-fluid">
<h1>Hello, world!</h1>
<div style="width: 100%; background: grey">
<p>Some text for content</p>
</div>
</div>
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199px) { ... }
<!-- Stack the columns on mobile by making one full-width and
the other half-width -->
<div class="row example">
<div class="col col-md-8">.col .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3%
wide on desktop -->
<div class="row example">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row example">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="http://placekitten.com/64/64" alt="image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel...
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<img src="http://placekitten.com/64/64" alt="image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla ...
</div>
</div>
</div>
</div>
<img class="hidden-lg-down" src="http://placekitten.com/1100/50"
alt="image">
<img class="hidden-md-down" src="http://placekitten.com/900/50"
alt="image">
<img class="hidden-sm-down" src="http://placekitten.com/700/50"
alt="image">
<img class="hidden-xs-down" src="http://placekitten.com/500/50"
alt="image">
<div class="visible-print-block">
<h1>Here is some hidden text!</h1>
</div>
<p>This is a <code>code</code> item</p>
<pre><code>This is a longer line of code
It even line wraps! Be careful of spacing.</code></pre>
<p>There is even a tag for variables like <var>x</var></p>
<p>And for indicating input <kbd>cmds</kbd></p>
<p>Sample output: <samp>This is sample output</samp></p>
https://www.w3schools.com/html/html_computercode_elements.asp
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention,
but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're
<a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">
Change a few things up</a> and try submitting again.
</div>Components - Dismissable Alert
<div class="alert alert-warning alert-dismissible fade show"
role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong> You should check in on
some of those fields below.
</div>
<!-- Provides extra visual weight and identifies the primary
action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while
maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<div id="my_modal" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save
changes</button>
<button id="close_modal" type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" id="show_modal" class="btn btn-info">Show</button>
$('#show_modal').on('click', function(){
$('#my_modal').modal();
});$('#close_modal').on('click', function(){
$('#my_modal').modal('hide');
});
Modal Message on Page Load
<div id="message">
<input type="hidden" id="message_flash" value="Text Here!">
<input type="hidden" id="message_type_flash" value="success">
</div>
<button id="show_message" class="btn btn-primary">Show Message!</button>
#message {
position: fixed;
top: 10px;
width: auto;
left: 50%;
transform: translate(-50%, 0);
z-index: 1060;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Modal Message on Page Load
var displayMessage = function(message, type){
var html = '<div id="javascriptMessage" class="alert fade show
alert-dismissable alert-' + type + '"><button type="button"
class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
<span class="h4">' + message + ' </span></div>';
$('#message').append(html);
setTimeout(function() {
$("#javascriptMessage").alert('close');
}, 3000);
};
$( document ).ready(function(){
$('#show_message').on('click', function(){
displayMessage("This is a problem!", "danger");
})
if($('#message_flash').length){
var message = $('#message_flash').val();
var type = $('#message_type_flash').val();
displayMessage(message, type);
}
});