Bootstrap components – four are required: You can pick which ones. I may give extra credit for additional onesWhat is a component? – see the list

/in /by
  • Topic – anything you choose
  • You must use Bootstrap
  • root directory: bootstrap
  • you can either put the necessary bootstrap css, jQuery, and bootstrap.js files in your bootstrap folder (using css, fonts, and js folders) or use CDNs, or a combination; you can use the regular or the minified version
  • you may use Dreamweaver if you like
  • HTML four files minimum
  • Use CSS rather than deprecated/obsolete tags and attributes
  • have the necessary !doctype, html, head, title, and body tags in the proper places
  • the filename of the first page of your site (usually the home page) should be index.html or index.htm or some other name so that the server will send the page when a URL without the file name is entered in the browser
  • Image files:You must use at least 4 image files. They can be used as inline images or as background images
  • You may use an image file in more than one place. For example, if you have an image named turtle.jpg, you may use this on all the pages, for example as a background image in the footer. This counts as 1 image.
  • If you take an image file from another site, specify in HTML comments near the img tag (or near the specification of the background image using CSS comments) the exact URL of the image from the other site (e.g. saying Google Images is not sufficient) – it must be clear which image is taken from which site.
  • If you are using an image from another site, the proper approach is to save the file to your site and the image reference (e.g. in the src attribute) will then be a relative reference to the file on your site; do not use an absolute reference to the image on the other site (two reasons: the image will disappear from your site if the other site renames, moves or removes the image, and the absolute reference to the other site imposes a small cost on that site)
  • If the image was created by you or someone you know, either in a graphics program or by taking a picture, indicate that in HTML comments.
  • You should not resize images using either HTML attributes or CSS; if you need to resize, do it in a graphics program
  • The image should be responsive, e.g. by adding a class=”img-responsive” to the img tag – see the example at https://www.w3schools.com/bootstrap/bootstrap_images.asp
  • Specify an appropriate value for the alt attribute for all non-trivial images
  • CSS: use bootstrap.css or the minified versionif you choose to add some custom CSS, make the own CSS file, separate from bootstrap.css
  • the link to the custom style sheet must go below the link to the bootstrap.css so that it overrides the bootstrap css file where there is a conflict
  • use CSS for layout rather than tables or a linear layout (a linear layout is one that can be achieved without the use of tables or CSS)
  • do not use inline or embedded styles
  • TextTry to put y our own text. You may use limited text from elsewhere, if you indicate (e.g. in HTML comments) the exact URL of the place where you got the text; e.g. don’t just say Wikipedia – it must be clear what text is taken from what site
  • Have sufficient contrast between text and background so that your text (including visited and unvisited links) is easily readable
  • ResponsivenessSite must be responsive
  • In other words, the layout changes at least once depending upon viewport size: xs, sm, md, lg (Bootstrap 3) or col, sm, md, lg, xl (Bootstrap 4)
  • use bootstrap grid-based classes to make.
  • you may, but need not, specify multiple classes for a particular element so that the layout changes at multiple breakpoints. I may give extra credit for this.
  • Bootstrap components – four are required: You can pick which ones. I may give extra credit for additional onesWhat is a component? – see the list at http://getbootstrap.com/components/ or https://www.w3schools.com/bootstrap/default.asp (the links on the left from Typography through Affix) or the list in Dreamweaver from Insert>Bootstrap Components. Several of these relate to forms so use of the multiple form-related ones will count as 2.
  • The components should enhance the look or operation of the site and be integrated into the site. For example, if you use a navbar, all the navbar links must work and the navbar must be present on every page..If you use a navbar, you may want to make it responsive, so it changes to a “hamburger” icon when the viewed on a mobile device (see the last example at https://www.w3schools.com/bootstrap/bootstrap_navbar.asp )

I really need it before Sunday mid night. i just need a complete version, not really care about right or wrong. I will put some TIPS when i get it before midnight.