-
72 |
- Item
73 |
-
74 |
- Sub Item 75 |
- Sub Item 76 |
- Sub Item 77 |
79 | - Item 80 |
- Item 81 |
Tawian frontend
53 | 54 |Components
55 | 56 |Links and Typo
57 | 58 |Lead ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
59 | 60 |
61 | Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod italic incididunt ut bold et dolore magna aliqua. Ut enim ad highlight minim veniam, deletion quis nostrud exercitation insertation ullamco laboris underlined nisi ut aliquip ex small ea commodo consequat abbr. Duis aute irure dolor in reprehenderit ⌘ + Space 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.1
62 |
Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate
65 | 66 | 67 |List
68 | 69 |-
85 |
- One 86 |
- Two 87 |
- Three
88 |
-
89 |
- Three One 90 |
- Three Two 91 |
93 | - Four 94 |
Blockquote
100 | 101 |102 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita. someone 103 |104 | 105 | 106 |
Code
107 | 108 |You can use inline code
, inline sample output or code blocks. Use .scroll
to prevent code wrapping.
while true; do { echo -e "HTTP/1.1 200 OK\r\n"; cat index.html; } | nc -l 8080; done
111 | 3.00 real 0.00 user 0.00 sys
$ exit 114 | 115 |
Horizontal Rule
116 | 117 |118 | 119 | 120 |
Form
121 | 122 |Inline Form
123 | 124 | 137 | 138 | 139 |Horizontal Form (default on larger screens)
140 | 141 | 202 | 203 | 204 |Stateful Form
205 | 206 | 219 | 220 | 221 |Help Block
222 | 223 | 244 | 245 | 246 |Disabled
247 | 248 | 268 | 269 | 270 |Readonly
271 | 272 | 285 | 286 | 287 |Required
288 | 289 | 302 | 303 | 304 |Vertical Form (default on smaller screens)
305 | 306 | 371 | 372 | 373 |File Input with Dropzones, e.g. react-dropzone
374 | 375 |Table
389 | 390 |states | 394 |param | 395 |param | 396 |param | 397 |
---|---|---|---|
cell states | 402 |90 | 403 |80 | 404 |70 | 405 |
normal state | 408 |60 | 409 |85 | 410 |80 | 411 |
row state | 414 |80 | 415 |65 | 416 |60 | 417 |
classes | 428 |param | 429 |param | 430 |param | 431 |
---|---|---|---|
narrow | 436 |✗ | 437 |✗ | 438 |✔ | 439 |
striped | 442 |✔ | 443 |✔ | 444 |✔ | 445 |
/ | 448 |✔ | 449 |✗ | 450 |✔ | 451 |
/ | 454 |✔ | 455 |✔ | 456 |✗ | 457 |
/ | 460 |✔ | 461 |✗ | 462 |✔ | 463 |
/ | 466 |✔ | 467 |✔ | 468 |✗ | 469 |
classes | 478 |param | 479 |param | 480 |param | 481 |
---|---|---|---|
wide | 486 |✗ | 487 |✗ | 488 |✔ | 489 |
hoverable | 492 |✔ | 493 |✗ | 494 |✔ | 495 |
/ | 498 |✔ | 499 |✔ | 500 |✗ | 501 |
List Group
509 | 510 |-
513 |
- Cras justo odio 514 |
- DISABLED 515 |
- Morbi leo risus Tag 516 |
- ACTIVE 517 |
- Porta ac consectetur 518 |
Progress bar
542 | 543 |546 |
549 | 550 | 551 |552 |
555 | 556 |.narrow
559 | 580 | For advanced progress bars consider progressbar.js. 581 |
582 | 583 | 584 |Buttons
585 | 586 |587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 |
596 | 597 |598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 |
606 | 607 |608 | 609 |
610 | 611 | 612 |Button Groups
613 | 614 |Loading Indicator
684 | 685 | 686 | 687 | 688 |Tags
689 | 690 |691 | Tags have different states like 692 | normal and 693 | success and 694 | info and 695 | warning and 696 | error. 697 |
698 | 699 | 700 |Icons from bytesize-icons
701 | 702 |The icons don't work in IE / Edge. Consider inlining the svg file for Edge or svg4everybody for IE.
703 | 704 |705 | 706 | 709 | 712 | 715 | 716 | 719 | 722 | 725 | 726 | Yay 727 |
728 |729 | Can be sized, e.g. normal, medium or large. 730 |
731 | 732 |733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 |
819 | 820 | 821 |Tooltips naive version, might be out of screen
822 | 823 |Cards
840 | 841 |842 |
echo "and a third"877 |
Alerts
883 | 884 |Default message
Info message
Warning message
Success message
Error message
Images and Figures
894 | 895 |You can use inline.
.full-width
898 |
899 | Figure with Caption
902 | 903 |Details & Summary
910 | 911 |Hidden Text Sample
913 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum molestiae et dicta, vero alias ab tempore obcaecati tempora odit voluptates. Eum inventore omnis, ullam rerum tenetur optio quasi a totam!
914 |Hidden Code Sample
918 | $ time sleep 33.00 real 0.00 user 0.00 sys
$ exit 919 |
Toggleable Cards
922 | 923 |Card Header
925 |3.00 real 0.00 user 0.00 sys
$ exit 929 |
Basic
933 | 934 |Use .container
to centralize the main content.
Use .site-header
, .site-main
and .site-footer
for the main sectioning elements.
.site-header
contains .site-nav
which is not responsive by default but can be appended by .responsive-nav
to collapse and show a hamburger icon on smaller screens. It can carry .responsive-nav-animated
to add a sliding animation to the nav.
Grid
942 | 943 |Inline Grid
987 | 988 |Modifiers
996 | 997 |.grid
modifiers
1000 | -
1001 |
- To change spacing use
grid-narrow
orgrid-wide
1002 |
-
1004 |
- To align items with align-items use
1005 |
-
1006 |
grid-top
: To top
1007 | grid-middle
: To middle
1008 | grid-bottom
: To bottom
1009 | grid-stretch
: Stretch items
1010 | grid-baseline
: To baseline
1011 |
1013 |
-
1015 |
- To layout contents with justify-content use
1016 |
-
1017 |
grid-left
: To left
1018 | grid-center
: To center
1019 | grid-right
: To right
1020 | grid-between
: Add spaces between items
1021 | grid-around
: Add spaces around items
1022 |
1024 |
.cell
modifiers
1028 | -
1029 |
grid-top
: To top
1030 | grid-middle
: To middle
1031 | grid-bottom
: To bottom
1032 |
-
1034 |
cell-1
: Set item width to 8.3% of parent
1035 | cell-2
: Set item width to 16.7% of parent
1036 | cell-3
: Set item width to 25% of parent
1037 | cell-4
: Set item width to 33% of parent
1038 | cell-5
: Set item width to 41.7% of parent
1039 | cell-6
: Set item width to 50% of parent
1040 | cell-7
: Set item width to 58.3% of parent
1041 | cell-8
: Set item width to 66.7% of parent
1042 | cell-9
: Set item width to 75% of parent
1043 | cell-10
: Set item width to 83.3% of parent
1044 | cell-11
: Set item width to 91.7% of parent
1045 | cell-12
: Set item width to 100% of parent
1046 |
-
1052 |
-
1053 |
Example footnote text. ↩
1054 |
1055 |