![]() In this row, we need a div for the slideshow and a placeholder image. This is a pre-defined class (that is explained in the Bootstrap documentation). container div to hold all the content.Īs shown below, inside the body tag, add the following code: You can find out more about the pre-defined CSS rules at /cssīootstrap requires a specific nested structure: container > row > column. We’re ready to start laying out the page using Bootstrap’s pre-made classes. We’ll make use of this later, in combination with Bootstrap’s JavaScript library.Īdding Real Content & Laying Out the Page Below the title, link to their CSS with the following code: Īt the bottom of the file notice that we have linked to jQuery. We need to link to the Bootstrap CSS file, which will provide us with many of the components for our layout. We’ll start at the top and work our way down. Open that folder in your code editor if it allows you to (like Sublime Text does). NOTE: In addition to Bootstrap’s files, we have added a basic index.html, images, jquery (in the js folder), and snippets that you’ll be using in this series of exercises.įor this exercise we’ll be working with the Bootstrap folder. Then go into Class Files > yourname-Mobile and Responsive Class > Bootstrap. ![]() Let’s see what’s included in the download. We’ve already downloaded the files for you, but here you can learn about its features, see code examples, and read the documentation. Over the next few exercises you’ll continue building the page and learning about Bootstrap. In this exercise, you’ll start coding a page using Bootstrap’s basic elements. Grids help keep a design consistent and make it easier to be responsive. Its core feature is a grid system for creating columns and rows. Topics covered in this Mobile & Responsive Web Design tutorial:Īdding content & laying out the page, Using Bootstrap’s grid system, Creating & adjusting columns, Adding a navbar & other components Exercise Previewīootstrap 3 is a powerful front-end framework that can make web development faster and easier. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction. Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials.
0 Comments
Leave a Reply. |