Headings
+h1. Bootstrap heading
+h2. Bootstrap heading
+h3. Bootstrap heading
+h4. Bootstrap heading
+h5. Bootstrap heading
+h6. Bootstrap heading
+ +Horizontal Line
++ +
Lead
+Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+ +Styles
+You can use the mark tag to + highlight text.
+
+ This line of text is meant to be treated as deleted text.
+
+ This line of text is meant to be treated as no longer accurate.
+
+ This line of text is meant to be treated as an addition to the document. +
++ This line of text will render as underlined +
+This line of text is meant to be treated as fine print.
+This line rendered as bold text.
+This line rendered as italicized text.
+And this is a muted text.
+abbr abbr+init
+ +Colors
++ + .text-primary + + .text-secondary + + .text-success + + .text-danger + + .text-warning + + .text-info + + .text-light + + .text-dark + + .text-white + +
++ + Primary link + + Secondary link + + Success link + + Danger link + + Warning link + + Info link + + Light link + + Dark link + + White link + +
+ +Inline code
+For example, <section>
should be wrapped as inline.
y = mx + b
+To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
+
This text is meant to be treated as sample output from a computer program.
+Displays
+Display 1
+Display 2
+Display 3
+Display 4
+ +Sample body
++ Lórum ipse - mint senyért - nyált ságos iség, ahol beles metás, csaprozás, vermény, csaprát + és más meni zsorlóca kuncáskodik. Mosztag, férzet napé, fuvódás 11, törnyélés ; valamint szuvegés vitancs: a dozmus drikója, + jultsás kelés magyarul. A szuvegés és gyarány pasztákban buggyos mendernyékről, filingéjükről és pucájukról húzódik a + fabampa. Hűtő benne a legújabban belég mendernyék mártja is, részletesen sáskodik a kétenc fríg lepkonyaival. Csétletésről + cigál le egy kéző lengelész csapárába rimulnia, ahol három másik szivény együtt érleti spotráit. Ha a bénulás summája + kalkodik, úgy púdulhat, mintha az volna a sülső csoltása, hogy a szedhentes és egyes tengyelét lécetse ki a pávágyokból. + Ez vajon vertető ölyök vagy vegítő dosna? Szalalizál bunya a felegesben olyan szellőző kedő, amely farisban kevetteti + a nyagondos hizmusok „énemlő” lárias mizmusait? +
+ +Code block
+ +/**
+ * @author John Smith <john.smith@example.com>
+ */
+package l2f.gameserver.model;
+
+public abstract class L2Char extends L2Object {
+ public static final Short ERROR = 0x0001;
+
+ public void moveTo(int x, int y, int z) {
+ _ai = null;
+ log("Should not be called");
+ if (1 > 5) { // wtf!?
+ return;
+ }
+ }
+}
+ Blockquote
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
...centered
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
...on right
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
List
+-
+
- Lorem ipsum dolor sit amet +
- Consectetur adipiscing elit +
- Integer molestie lorem at massa +
- Facilisis in pretium nisl aliquet +
- Nulla volutpat aliquam velit
+
-
+
- Phasellus iaculis neque +
- Purus sodales ultricies +
- Vestibulum laoreet porttitor sem +
- Ac tristique libero volutpat at +
+ - Faucibus porta lacus fringilla vel +
- Aenean sit amet erat nunc +
- Eget porttitor lorem +
...unstyled
+-
+
- Lorem ipsum dolor sit amet +
- Consectetur adipiscing elit +
- Integer molestie lorem at massa +
- Facilisis in pretium nisl aliquet +
- Nulla volutpat aliquam velit
+
-
+
- Phasellus iaculis neque +
- Purus sodales ultricies +
- Vestibulum laoreet porttitor sem +
- Ac tristique libero volutpat at +
+ - Faucibus porta lacus fringilla vel +
- Aenean sit amet erat nunc +
- Eget porttitor lorem +
...inline
+-
+
- Lorem ipsum +
- Phasellus iaculis +
- Nulla volutpat +
Definition list
+-
+
- Description lists +
- A description list is perfect for defining terms. + +
- Euismod +
-
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+Donec id elit non mi porta gravida at eget metus.
+
+
+ - Malesuada porta +
- Etiam porta sem malesuada magna mollis euismod. + +
- Truncated term is truncated +
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + +
- Nesting +
-
+
-
+
- Nested definition list +
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. +
+
Background colors
+Responsive image
+ +Thumbnail
+ +Figure
+ +Media
+Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in + vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in + faucibus. + +Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in + vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis + in faucibus. +Table
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
Inversed table
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
Table with colors
+Note: Use table-*
classes.
Type | +Column heading | +Column heading | +
---|---|---|
Default | +Column content | +Column content | +
Active | +Column content | +Column content | +
Primary | +Column content | +Column content | +
Secondary | +Column content | +Column content | +
Success | +Column content | +Column content | +
Danger | +Column content | +Column content | +
Warning | +Column content | +Column content | +
Info | +Column content | +Column content | +
Light | +Column content | +Column content | +
Dark | +Column content | +Column content | +
Inversed table with colors
+Note: Use bg-*
and text-*
classes.
Type | +Column heading | +Column heading | +
---|---|---|
Default | +Column content | +Column content | +
Primary | +Column content | +Column content | +
Secondary | +Column content | +Column content | +
Success | +Column content | +Column content | +
Danger | +Column content | +Column content | +
Warning | +Column content | +Column content | +
Info | +Column content | +Column content | +
Light | +Column content | +Column content | +
Dark | +Column content | +Column content | +
Default header
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
Inversed header
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
Small table
+# | +First Name | +Last Name | +Username | +
---|---|---|---|
1 | +Mark | +Otto | +@mdo | +
2 | +Jacob | +Thornton | +@fat | +
3 | +Larry | +the Bird | +
...with actions and colors
+...with custom content
+List group item heading
+ 3 days ago +Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + + +List group item heading
+ 3 days ago +Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + + +List group item heading
+ 3 days ago +Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ Donec id elit non mi porta. + +General buttons
+Outline buttons
+Sizes
+Groups and dropdown
+ +Pagination
+ +Default jumbotron
+Hello, world!
+This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
++
It uses utility classes for typography and spacing to space content out within the larger container.
++ Learn more +
+Fluid jumbotron
+Fluid jumbotron
+This is a modified jumbotron that occupies the entire horizontal space of its parent.
+Various types of cards
+-
+
- Cras justo odio +
- Dapibus ac facilisis in +
- Vestibulum at eros +
Card title
+Card subtitle
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Card link + Another link +++Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
Special title treatment
+With supporting text below as a natural lead-in to additional content.
+ Go somewhere +Special title treatment
+With supporting text below as a natural lead-in to additional content.
+ Go somewhere +Some quick example text to build on the card title and make up the bulk of the card's content.
+Card title
+This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little + bit longer.
+Last updated 3 mins ago
+Card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+-
+
- Cras justo odio +
- Dapibus ac facilisis in +
- Vestibulum at eros +
Special title treatment
+With supporting text below as a natural lead-in to additional content.
+ Go somewhere +Special title treatment
+With supporting text below as a natural lead-in to additional content.
+ Go somewhere +Colored cards
+Primary card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Secondary card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Success card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Danger card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Warning card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Info card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Light card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Dark card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Cards with colored borders
+Primary card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Secondary card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Success card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Danger card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Warning card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Info card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Light card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Dark card
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Contextual badges
++ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +
+ +Pill badges
++ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +
+ +Links
++ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +
+Badges in headings
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Simple alerts
+Alerts with additional content
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that + you can see how spacing within an alert works with this kind of content. Also here is an example alert link.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+