Bootstrap 4 December 17, 2018.

Slides:



Advertisements
Similar presentations
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Advertisements

Android UserInterfaces Nasrullah Niazi. overView All user interface elements in an Android app are built using View and ViewGroup objects. A View is an.
15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Tutorial 6 Creating Fixed-Width Layouts
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Principles of Web Design 6 th Edition Chapter 7 – Page Layouts.
Cascading Style Sheets CSS. CSS Positioning Normal Flow Top -> bottom | left -> right Arranged in the order they appear in the code make room for one.
Cascading Style Sheets CSS. div … Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with.
1 Intro XAML Attribute syntax & property syntax Panels Reusable resources Controls Data binding Steen Jensen, spring 2014.
Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.
COMP 135 Web Site Design Intermediate
Rujchai Ung-arunyawee Department of Computer Engineering Khon Kaen University.
Positioning Objects with CSS and Tables
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
A gentle introduction to Bootstrap TDAP Jeremy Shafer Department of MIS Fox School of Business Temple University Spring
Cascading Style Sheets for layout
Laying out Elements with CSS
Bootstrap KS Technologies.
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
CNIT131 Internet Basics & Beginning HTML
>> Navigation and Layouts in CSS
Cascading Style Sheets Boxes
CSS Table Styling.
CSS Wrap-Up Lists as a Navigation System CSS Layout CSS Animations
What’s New In Bootstrap v4?
A better approach to mobile
CS 321: Human-Computer Interaction Design
Tables and Frames.
ASP.NET Web Controls.
Introduction to Bootstrap Bootstrap සදහා හැදින්වීම
© 2016, Mike Murach & Associates, Inc.
Flexbox CSCI 1720 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
User Interface Design and Usability Bootstrap
CS3220 Web and Internet Programming Page Layout with CSS
Bootstrap A popular HTLM, CSS, and JS framework for developing responsive, mobile first projects on the web.
Creating a Baseline Grid
CS3220 Web and Internet Programming Introduction to Bootstrap
IS1500: Introduction to Web Development
CS3220 Web and Internet Programming Page Layout with CSS
Objectives Create a media query Work with the browser viewport
CSS part 2 Outro.
Responsive Design.
03 | Building Windows Store Apps with XAML Part 3
Tables:.
CSS Table Styling.
Objectives Create a reset style sheet Explore page layout designs
Fixed Positioning.
Responsive Framework.
Responsive Web Design and Bootstrap
06 | Introduction to Bootstrap
DHTML tidbits.
Responsive Grid Layout with Bootstrap
Responsive Web Design (RWD)
Floating and Positioning
Chapter 2 Bootstrap Grid System
CS3220 Web and Internet Programming Page Layout with CSS
Responsive Web Design and Bootstrap
CS3220 Web and Internet Programming Introduction to Bootstrap
Web Page Layout Imran Rashid CTO at ManiWeber Technologies.
CSS Boxes CS 1150 Fall 2016.
CSS Layout: Flexbox.
Web Client Side Technologies Raneem Qaddoura
CSc 337 Lecture 5: Grid layout.
Cascading Style Sheets CSS LAYOUT WITH GRID
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

Bootstrap 4 December 17, 2018

FORMS Bootstrap 4 provides two types of form layouts, stacked forms and inline forms For a stacked form, add a wrapper element with class “form-control” around each form control to ensure proper margins In an inline form, all of the elements are inline. This only applies to forms within viewports that are at least 576px wide. On screens smaller than 576px, it will stack horizontally. This example adds the right margin class, mr-sm-2 class to inputs on devices small and up It adds a margin bottom class, mb-2 to style inputs when they go from horizontal to vertical

Bootstrap Grids A bootrap grid needs to be placed in a container The container class is a fixed width container with widths determined by screen sites. Equal margin on the left and right. .container-fluid is a container that spans the full width of the screen

Grid CLasses The Bootstrap 4 grid system has five classes: col- (extra small devices - screen width less than 576px) col-sm- (small devices - screen width equal to or greater than 576px) col-md- (medium devices - screen width equal to or greater than 768px) col-lg- (large devices - screen width equal to or greater than 992px) col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Grid System RUles Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns could use three col-sm-4 Each class scales up so this would produce three equal columns on sm, md, lg, and xl devices The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as "equal width columns"

Flex Flexbox has an easy-to-use layout that can be excellently utilized in responsive design, as it provides a flexible container that either expands or shrinks itself to fill the available space the best way. The main advantage of this layout mode is that it makes the following layout tasks easier within a layout container: Alignment of items Specification of the layout direction Specification of layout order of items

Using FLexBox Classes To create a flexbox container and to transform direct children into flex items, use the d- flex class Use .flex-row-reverse to right-align the horizontal direction Use .flex-column to display the flex items vertically (on top of each other) Use the .justify-content-* classes to change the alignment of flex items. Easily add auto margins to flex items with .mr-auto or .ml-auto Control the vertical alignment of gathered flex items with the .align-content-* classes

Resources Adding Bootstrap 4 to Visual Studio 2017 ASP.NET Core 2.1: https://stackoverflow.com/questions/48481003/how-to-use-bootstrap-4-in-asp-net-core Code: https://github.com/carolynlschroeder/bootstrap4demo Presentation: http://schroederconsultingllc.com/