What is Bootstrap?
Why Use It?
- Responsive Web Design: lots of built-in (“out of the box”) features to ensure that your site looks good across all types/sizes of devices
- NavBar: Beautiful menus!
- Consistent look and feel: buttons, menus, headings, lists, and many other Web page components
- Themes: Many lovely themes available to change the colors and other aspects of appearance just by swapping out a file! See Bootswatch for a nice selection of free downloadable themes
How Do I Get Bootstrap Into My Project?
- Open your Web project in Atom: make sure you are in your site’s main Project Folder (FilmFestivalSite in below example).
- Add project folders: right-click on your project folder in Atom and choose “New Folder” to create folders named css, fonts, images, and scripts.
- Get Bootstrap
- Download: Go to http://getbootstrap.com/getting-started/#download. Click the Download Bootstrap button. That will download a file named bootstrap-3.3.6-dist.zip to your computer.
- Unzip the files: On Windows machines you will find the zip in your Downloads directory, right-click and choose “Extract All”. You can change the destination folder if you like before hitting the “Extract” button, but be sure you know where the files are.
- Copy the files to the folders in your Web project: the extracted files are organized into css, fonts, and js folders below the bootstrap-3.3.6-dist folder. Copy to the matching folders in your Web project: css to css, fonts to fonts, and “js” to “scripts”. Hint: In Atom you can right-click on a folder and select “Show in Explorer” (Windows) or “Show in Finder” (Mac) to open your destination folder to set up the copy with side-by-side windows.
- Get JQuery:
- Note: Version as of this writing is 1.12.3; get the latest 1.x.x version
- Download JQuery: https://jquery.com/download/. Under the JQuery 1.x section right-click on “Download the uncompressed development jQuery 1.12.3” and choose “save link as”. Save the file as jquery-1.12.3.js
- Copy the JQuery file to your project: copy jquery-1.12.3.js to the “scripts” folder of your project
Our First Bootstrap Page:
- Add a new HTML file named “BootstrapSample.html” to your Web site’s main folder.
- Copy content from our “Bootstrap Sample Page” to experience the power of Bootstrap right away. Once everyone has it running in your environment we can explain some of the opportunities for you to customize it and make it your own. This one is put together from combining elements of sample templates on the Bootstrap site
- The one change you will need to make is highlighted: that is the anchor <a> tag for one of the menu links; in my example it links to a page named “FilmDetails.html”. Change it to link to your own page.
Once you have your page working in your own environment if you want to upload it to your Web site on the server you need to ensure that the folder structure and files needed for Bootstrap and JQuery are uploaded as well. In ATOM you can select your css folder for upload to copy the folder and its contents; do the same with your scripts, fonts, and images folders.