Print bookPrint book

Submodule 3.2: Getting Started with Bootstrap

Site: ΕΛ/ΛΑΚ Moodle
Course: Study / Web Design and Web Development
Book: Submodule 3.2: Getting Started with Bootstrap
Printed by: Guest user
Date: Sunday, 24 November 2024, 2:22 AM

Description

  • Setting up the Project Folder
  • Downloading Bootstrap
  • Getting your Web page Bootstrap ready
  • Bootstrap typography

Table of contents

Setting up the Project Folder

Go to your folder location on your desktop and ...

  • create a sub-folder with the name yourNameWEB2Bootstrap and ...
    • in this folder download the Bootstrap4-starter.zip file and ...
      • unzip the file and move the folder leChocolat under the yourNameWEB2Bootstrap folder!

Click here to Download the file Bootstrap4-starter.zip

Install node modules

  • Go to the leChocolat folder and copy the address.
  • Open a cmd window if you are on a Windows computer or your terminal if you are using a Linux/Mac and navigate to the leChocolat folder by using the cd command and pasting the address.
  • At the prompt type "npm install". This will install the lite-server node module to your project.
  • Notice that a new folder node-modules has been created.

Initialize a Git repository

  • Open the folder leChocolat in your editor, set up a ".gitignore" file with the contents: node_modules and save it!
  • Next, initialize a Git repository in the project folder by typing "git init".
  • Check your Git repository's status "git status".
  • Add the files to the staging area "git add ."
  • Commit the current staging area to your Git repository 'git commit -m "Initial Setup"'.

Downloading Bootstrap

Open a cmd window/terminal and move to the leChocolat folder.

Use npm to fetch the Bootstrap files for use within your project:

npm install bootstrap@4.1.0 --save


The bootstrap->dist folder contains the precompiled Bootstrap CSS and JS files for use within your project

npm install jquery@3.3.1 --save


The jqery>dist folder contains the precompiled JS files for use within your project

npm install tether@1.4.4 --save


The tether>dist>js folder contains the precompiled JS files for use within your project

npm install popper.js --save


The popper>dist>js folder contains the precompiled JS files for use within your project

Open leChocolat folder in your editor, and then open the index.html file in the leChocolat folder. 

This is your starting web page for the project. I have already created the web page with some content to get you started. We will use Bootstrap to style this web page, and learn Bootstrap features, classes and components along the way.

Start your lite-server by typing

npm start

at the prompt.  The index.html file should now be loaded into your default browser.

Getting your Web page Bootstrap ready

Insert the appropriate code:

in the <head> of index.html file before the title.
This will include Bootstrap CSS into your web page.
Note the change in the fonts of the content of the web page. This is the Bootstrap typography effect coming into play. The default Bootstrap typography sets the font to Helvetica Neue and selects the appropriate font size based on the choice of the heading style and paragraph style for the content.

At the bottom of the page, just before the end of the </body> tag,

add the appropriate code

to include the JS files.

Do a Git commit with the message "Intro to Bootstrap".

Compare the git versions.