אפילו אוניברסיטת חיפה משבחת:
This is a Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is a Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a Heading 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a Heading 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Misc. elements
Using emphasis, addresses, & abbreviations
<strong>
<em>
<address>
<abbr>
When to use
Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.
Emphasis in a paragraph
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Note: It's still okay to use <b> and <i> tags in HTML5, but they don't come with inherent styles anymore. <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.
Addresses
The <address> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Note: Each line in an <address> must end with a line-break (<br />) or be wrapped in a block-level tag (e.g., <p>) to properly structure the content.
Abbreviations
For abbreviations and acronyms, use the <abbr> tag (<acronym> is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.
Blockquotes
<blockquote>
<p>
<small>
How to quote
To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an em dash — before it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
Preformatted Text Style
pre {
margin: 10px 0 10px 0px;
padding: 5px 0 5px 10px;
border: 1px dotted #aab4be;
border-left: 20px solid #b4b4b4;
background: #fafafa;
font-size: 90%;
color: #2E8B57;
font-family: "Courier New", Courier, monospace;
}
List Style
- Default ul style
- Default ul style
Icon Style
This is a sample of the alert style for p or span using class alert
This is a sample of the alert style for p or span using class asterisk
This is a sample of the alert style for p or span using class check
This is a sample of the alert style for p or span using class disk
This is a sample of the alert style for p or span using class edit
This is a sample of the alert style for p or span using class email
This is a sample of the alert style for p or span using class pdf
This is a sample of the alert style for p or span using class printer
This is a sample of the alert style for p or span using class star
This is a sample of the alert style for p or span using class tip
Box Style
Example: Default table styles
All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Some | One | English |
| 2 | Joe | Sixpack | English |
| 3 | Stu | Dent | Code |
Example: Zebra-striped
Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.
| # | First Name | Last Name | Language |
|---|---|---|---|
| 1 | Some | One | English |
| 2 | Joe | Sixpack | English |
| 3 | Stu | Dent | Code |
- <table class="zebra-striped">
- ...
- </table>
Form Styles
Stacked forms
Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.
Buttons
As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.
All buttons default to a light gray style, but a blue .primary class and a red .danger class is available. Plus, rolling your own styles is easy peasy.
Example buttons
Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:
Alternate sizes
Fancy larger or smaller buttons? Have at it!
Disabled state
For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s .disabled for links and :disabled for <button> elements.
Links
Buttons
Alerts & Errors Styles for success, warning, and error messages or alerts
Basic alerts
One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.
Block messages
For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.