Install Bootstrap
npm install
add .gitignore file and add entry for node_modules folder
npm install bootstrap@4.0.0 --save
npm install jquery@3.3.1 popper.js@1.12.9 --save
Add this in head
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
At this at bottom of body
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
.........................
Bootstrap Grid
<div class="container">
Its a fixed width layout container, which adjust acc to screen size
<div class="row">
Content will be divided into multiple row, which will have 12 equals columns
xs [extra small],sm [small],md [medium],lg [large],xl [extra-large]
Classes: col-* [for extra small], col-sm-*, col-md-* etc
<div class="col-sm-5">
This means this content will occupy 5 columns with small size
<div class="col-sm-7">
This means this content will occupy 5 columns with small size
Total to 12 in single line
<div class="col-sm"> <div class="col-sm"> <div class="col-sm">
each div will get 4th column width and equally divided
<div class="col-sm"> <div class="col-sm-6"> <div class="col-sm">
1st and 3rd will get 3 columns each
Bootstrap Grid has gutter width of 30 px (15px on each side of column)
Examples:
1) Using Column Classes
Extra Small Device
<div class="col-12 col-sm-5">
<div class="col-12 col-sm-7">
Small Medium Large Device
<div class="col-12 col-sm-5"> <div class="col-12 col-sm-7">
2) Re-ordering Content
Extra Small Device
<div class="col-sm-5 order-sm-last">
<div class="col-sm-7 order-sm-first">
Small Medium Large Device
<div class="col-sm-7 order-sm-first"> <div class="col-sm-5 order-sm-last">
First-> shifts to left
Last-> Shifts to right
3) Verticle Alignment
<div class="row align-items-center">
4) Horizontal Alignment
<div class="row justify-content-center">
<div class="col-3"><div class="col-auto"><div class="col-3">
col-auto-> Assigns columns based on content present
then all combination of divs will be centered horizontly
5) Column Offsets
<div class="col-sm-4 offset-sm-1">
Shift Div one column left [one column will be balnk from left]
6) Nesting Columns
<div class="row">
<div class="col-sm-5 order-sm-last">
</div>
<div class="col-sm-7 order-sm-first">
<div class="row">
<div class="col-sm-5 order-sm-last">
</div>
<div class="col-sm-7 order-sm-last">
</div>
</div>
</div>
</div>
..............................................
Put class="jumbotron" in header div to make it seperate (also gets grey background) from other divs
class="list-unstyled" in ul removes bullets
Add custom css in a seperate file and include it in header
<link href="css/styles.css" rel="stylesheet">
Refer: https://getbootstrap.com/docs/4.0/layout/grid/
To hide elements in specific device: https://getbootstrap.com/docs/4.0/utilities/display/
Below is the complete sample html file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
<a href="http://google.com/+">Google+</a>
<a href="http://www.facebook.com/profile.php?id=">Facebook</a>
<a href="http://www.linkedin.com/in/">LinkedIn</a>
<a href="http://twitter.com/">Twitter</a>
<a href="http://youtube.com/">YouTube</a>
<a href="mailto:">Mail</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
LESS
To install the node module to support the compilation of the Less file:
npm install -g less@2.7.2
To compile the Less file into a CSS file:
lessc styles.less styles.css
SASS
check you node version by node -v and check which node-sass version is suported for it from https://github.com/sass/node-sass/releases Now we install the node module to support the compilation of the Scss file to a CSS npm install --save-dev node-sass@5.0.0 Next open your package.json file and add the following line into the scripts object there. This adds a script to enable the compilation of the Scss file into a CSS file: "scss": "node-sass -o css/ css/" In order to transform the Scss file to a CSS file, type the following at the prompt: npm run scss
No comments:
Post a Comment