HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Foundation to use the browser default font size ( font-size:100%
). For most desktop browser device, the default font size is 16px. For browser for mobile devices, the default font size is 12px. The default font is "Helvetica Neue"
, Line-height defaults to 1.5
.
These settings are applied to <body>
element within the element.
In addition, <p>
outer element and the bottom of the distance (margin-bottom) is 1.25rem, line-height of 1.6.
The following HTML elements, Foundation set up a separate style rendering it will not use the browser's default style. Click "try" to view online instance.
element | description | Online examples |
---|---|---|
<H1> - <h6> | h1 - h6 headings | try it |
<a> | Light blue links, move the mouse to the link will be underlined | try it |
<Small> | Light gray text subtitle | try it |
<Blockquote> | Citation module | try it |
<Strong> | Bold text | try it |
<Em> | Italics | try it |
<Abbr> | Specify the word abbreviation, use the element appears dotted underline text, move the mouse up will prompt | try it |
<Kbd> | Receive keyboard input commands: CTRL + P | try it |
<Hr> | Level | try it |
<Code> | code segment | try it |
<Ul> | Unordered list | try it |
<Ol> | Ordered List | try it |
<Dl> | Descriptive List | try it |
Use CSS class to modify the alignment of the text:
class | description | Examples |
---|---|---|
.text-left | Left-aligned text | try it |
.text-right | Right-aligned text | try it |
.text-center | Center | try it |
.text-justify | Justified | try it |
Use CSS class to modify the text alignment of different screen sizes:
class | description | Examples |
---|---|---|
Left | ||
.small-text-left | All screen size Left | try it |
.small-only-text-left | Small screen Left (width less than 40em) | try it |
.medium-text-left | Width is larger than the screen size 40.0625em Left | try it |
.medium-only-text-left | 40.0625em width aligned to the left of the screen size 64em | try it |
.large-text-left | Width is larger than the screen size 64.0625em Left | try it |
.large-only-text-left | 64.0625em width aligned to the left of the screen size 90em | try it |
.xlarge-text-left | Width is larger than the screen size 90.0625em Left | try it |
.xlarge-only-text-left | 90.0625em width aligned to the left of the screen size 120em | try it |
.xxlarge-text-left | Width is larger than the screen size 120em Left | try it |
Align Right | ||
.small-text-right | All dimensions of the screen right-justified | try it |
.small-only-text-right | Small screen right alignment (width less than 40em) | try it |
.medium-text-right | Width greater than the size of the screen right-aligned 40.0625em | try it |
.medium-only-text-right | 40.0625em width aligned to the right screen size 64em | try it |
.large-text-right | Width greater than the size of the screen right-aligned 64.0625em | try it |
.large-only-text-right | 64.0625em width aligned to the right screen size 90em | try it |
.xlarge-text-right | Width greater than the size of the screen right-aligned 90.0625em | try it |
.xlarge-only-text-right | 90.0625em width aligned to the right screen size 120em | try it |
.xxlarge-text-right | Width greater than the size of the screen right-aligned 120em | try it |
Align | ||
.small-text-center | Align all screen sizes | try it |
.small-only-text-center | The small size of the screen centered (width less than 40em) | try it |
.medium-text-center | Width greater than the size of the screen centered 40.0625em | try it |
.medium-only-text-center | 40.0625em width to 64em screen sizes centered | try it |
.large-text-center | Width greater than the size of the screen centered 64.0625em | try it |
.large-only-text-center | 64.0625em width to 90em screen sizes centered | try it |
.xlarge-text-center | Width greater than the size of the screen centered 90.0625em | try it |
.xlarge-only-text-center | Width 90.0625em to 120em screen sizes centered | try it |
.xxlarge-text-center | Width greater than the size of the screen centered 120em | try it |
Justified | ||
.small-text-justify | All screen sizes are Justified | try it |
.small-only-text-justify | Justify the small size of the screen (width less than 40em) | try it |
.medium-text-justify | Width is larger than the screen size 40.0625em Justify | try it |
.medium-only-text-justify | Align both ends of the screen width to 64em size 40.0625em | try it |
.large-text-justify | Width is larger than the screen size 64.0625em Justify | try it |
.large-only-text-justify | Align both ends of the screen width to 90em size 64.0625em | try it |
.xlarge-text-justify | Width is larger than the screen size 90.0625em Justify | try it |
.xlarge-only-text-justify | Align both ends of the width of the screen size 90.0625em to 120em | try it |
.xxlarge-text-justify | Width is larger than the screen size 120em Justify | try it |
class | description | Examples |
---|---|---|
.left | Left-floating element | try it |
.right | Right-floating elements | try it |
.clearfix | Clear float - must be added to the parent element floating element | |
.hide | Hidden element (the CSS display: none ) | try it |
.list-inline | All elements arranged in the same row | try it |
.lead | Let <p> element is more prominent | try it |
.subheader | Setting light-colored <h1> - <h6> elements | try it |