Bootstrap - What the hell is it
-
Upload
laplante-web-development -
Category
Technology
-
view
150 -
download
3
Transcript of Bootstrap - What the hell is it
![Page 1: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/1.jpg)
Bootstrap CSSWhat the hell is it
@LaplanteWebDev
![Page 2: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/2.jpg)
![Page 3: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/3.jpg)
![Page 4: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/4.jpg)
Example
![Page 5: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/5.jpg)
![Page 6: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/6.jpg)
Example
• <div class=“container-fluid”></div>
• Full Width of page
• <div class=“container”></div>
• Fixed width on page
![Page 7: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/7.jpg)
![Page 8: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/8.jpg)
![Page 9: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/9.jpg)
EASY MODE
• Link To Bootstrap using their CDN
• <link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
• <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
![Page 10: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/10.jpg)
HARD MODE
• Install with your favorite package manager
• npm install bootstrap
• bower install boostrap
![Page 11: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/11.jpg)
![Page 12: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/12.jpg)
![Page 13: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/13.jpg)
Example• <a class="btn btn-default" href="#"
role="button">Link</a>
• <button class="btn btn-default" type="submit">Button</button>
• <input class="btn btn-default" type="button" value="Input">
• <input class="btn btn-default" type="submit" value="Submit">
![Page 14: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/14.jpg)
![Page 15: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/15.jpg)
Example
• <img src="..." class="img-responsive" alt="Responsive image”>
• <img src="..." alt="..." class="img-rounded">
• <img src="..." alt="..." class="img-circle">
• <img src="..." alt="..." class="img-thumbnail">
![Page 16: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/16.jpg)
![Page 17: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/17.jpg)
![Page 18: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/18.jpg)
Example
• <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
![Page 19: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/19.jpg)
![Page 20: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/20.jpg)
Example Time
![Page 21: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/21.jpg)
![Page 22: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/22.jpg)
Questions
![Page 23: Bootstrap - What the hell is it](https://reader036.fdocuments.in/reader036/viewer/2022081513/55c6f5a6bb61eb9f4f8b4805/html5/thumbnails/23.jpg)
Resources
• http://getbootstrap.com/
• http://lapweb.info/1K5emHU
• https://wrapbootstrap.com/
• http://lapweb.info/1K5evel