Bootstrap Intro: Responsive Web Design

2y ago
20 Views
3 Downloads
1.06 MB
5 Pages
Last View : 22d ago
Last Download : 2m ago
Upload by : Warren Adams
Transcription

Bootstrap Intro: Responsive WebDesignIntroduction to Bootstrap Framework for Responsive Web SitesWhat is Bootstrap?“Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobilefirst web sites.” – From W3Schools Bootstrap TutorialWhy Use It? Responsive Web Design: lots of built-in (“out of the box”) features to ensure that your site looksgood across all types/sizes of devicesNavBar: Beautiful menus!Consistent look and feel: buttons, menus, headings, lists, and many other Web pagecomponentsThemes: Many lovely themes available to change the colors and other aspects of appearancejust by swapping out a file! See Bootswatch for a nice selection of free downloadable themesHow to Get Bootstrap into Your Web ProjectBootstrap consists of JavaScript and CSS files that need to be added to your projectEdit an existing Web project or create a new one: For our demo we will use Glitch: Go to https://glitch.comOpen your Web project from our previous meeting or click the New Project button and select“hello-webpage”Select the index.html file in the editorView in the Browser using the Show option above the list of files to see the “before Bootstrap”appearanceGet Bootstrap and add to your project Go to introduction/Follow the instructions under Quick start to copy and paste the CSS and the JS links into yourindex.html pageo CSS goes inside the head elemento JS goes just before the closing /body tagThis initial example uses the CDN (Content Delivery Network) source for the CSS and JavaScriptfiles, i.e., the files are hosted in the cloud rather than copied to your projectTake another look at your project in the Browser; depending on what content you have on yourpage you may see differences from the previous appearance Fox Valley Girls Coding ClubBootstrap Intro: Responsive Web Design1

Insert Bootstrap stylesheetlink in head before yourproject-specific stylesheet(s)Insert JQuery, Popper, andBootstrap JavaScript sourcesabove closing /body tagAdd some features to showcase Bootstrap’s PowerNavigation Go to r/ Scroll to the first code example under “Supported Content” Click “Copy” in the upper right of the Navbar example Paste it into your project right under the body tag, i.e., at the start of the content View your page in the Browser again Resize the Window or look at your site on your phone to see the Responsive design: The barmenu changes to the “hamburger” menu! Fox Valley Girls Coding ClubBootstrap Intro: Responsive Web Design2

Tip: Move the Glitch button to the bottom: find the “glitchButton” div near the bottom of thecode and change “top” to “bottom”Jumbotron tron/ Copy and paste to your page right below the /nav closing tag Modify the text in the Jumbotron and view your page againResponsive Columns You can design a layout with multiple columns that look great on a large tablet or computer buttoo small on a phone; responsive design in Bootstrap will automatically stack the columns basedon screen size Try using the first code example here: ge the Theme! Bootstrap consists of JavaScript and CSS; it is the CSS that affects the appearance, so we caneasily change the look by changing the CSSGo to Bootswatch.comFind an appealing theme and click the Preview button; when you find one you like click thearrow next to Download. Choose bootstrap.css from the list In your Glitch project, click “New File” above the file list, then “Upload a File”, select thebootstrap.css file from your downloads folderReplace the existing bootstrap css link with your new file: Fox Valley Girls Coding ClubBootstrap Intro: Responsive Web Design3

oooFirst make a copy of the index.html file by clicking the three stacked dots next to filename and selecting duplicate, so we can compare the twoIn your original index.html, find the link for bootstrap.min.css in the header; changeit to this: link rel "stylesheet" href "bootstrap.css" / And, just like that, we have a Slate Theme!Much, Much, More! Explore using some of the other components using the examples from one of these sites:o Bootstrap: https://getbootstrap.com/o https://www.w3schools.com/bootstrap4/ Fox Valley Girls Coding ClubBootstrap Intro: Responsive Web Design4

Fox Valley Girls Coding ClubBootstrap Intro: Responsive Web Design5

Introduction to Bootstrap Framework for Responsive Web Sites What is Bootstrap? “ootstrap is the most popular HTML, SS, and JavaScript framework for developing responsive, mobile - first web sites.” – From W3Schools Bootstrap Tutorial Why Use It?

Related Documents:

Bootstrap Bootstrap is an open source HTML, CSS and javascript library for developing responsive applications. Bootstrap uses CSS and javascript to build style components in a reasonably aesthetic way with very little effort. A big advantage of Bootstrap is it is designed to be responsive, so the one

alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still a nascent area, respon-sive web design has received more attention. Patterns and principles of responsive web design have been studied [15, 16]. HTML5 and CSS3 are popular standards to implement responsive designs [9].

alization, visualization authoring, and responsive web design. Responsive Web Design While responsive visualization is still a nascent area, respon-sive web design has received more attention. Patterns and principles of responsive web design have been studied [15, 16]. HTML5 and CSS3 are popular standards to implement responsive designs [9].

Thanks to the great integratio n with Bootstrap 3, Element s and Font Awesome you can use all their powers to improve and enhance your forms. Great integration with DMXzone Bootstrap 3 and Elements - Create great-looking and fully responsive forms and add or customize any element easily with the help of DMXzone Bootstrap 3 and Bootstrap 3 Elements.

Bootstrap Cautions These methods for creating a confidence interval only work if the bootstrap distribution is smooth and symmetric ALWAYS look at a plot of the bootstrap distribution! If the bootstrap distribution is highly skewed or looks "spiky" with gaps, you will need to go beyond intro stat to create a confidence interval

Intro to Bootstrap April 2004 ' & % Example: Empirical Distribution Function Empirical Distribution Function x F(x)-2 -1 0 1 2 0.0 0.2 0.4 0.6 0.8 1.0 Figure 1: Empirical distribution function from a random sample of size n from a standard normal distribution Intro to Bootstrap April 2004 ' & % Bootstrap Idea Use as an estimate the .

that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. If we’re willing to research the needs of our users, and apply those ingredients carefully, then responsive web design is a powerful approach indeed. Ethan Marcotte, “Responsive Web Design”

DEGREE COURSE: DATE OF BIRTH: FOR TEST SUPERVISORS USE ONLY: [ ] Tick here if special arrangements were made for the test. Please either include details of special provisions made for the test and the reasons for these in the space below or securely attach to the test script a letter with the details. Signature of Invigilator FOR OFFICE USE ONLY: Q1 Q2 Q3 Q4 Q5 Q6 Q7 Total. 1. For ALL .