From f3055ba6c57d31b60bdbd6aff2a137852a23dcdc Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Apr 2016 19:08:58 +0800 Subject: update doc utilities --- index.html | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 96 insertions(+), 12 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 8a048f8..a7b90d5 100644 --- a/index.html +++ b/index.html @@ -1631,39 +1631,123 @@ position display text - shadow shapes
-

position

-

Position utilities are used for useful layout and position things.

+

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

-
-
-
-
+ +
+<!-- clear float -->
+<div class="clearfix"></div>
+<!-- float: left and right-->
+<div class="float-left"></div>
+<div class="float-right"></div>
+<!-- position: relative, absolute and fixed-->
+<div class="rel"></div>
+<div class="abs"></div>
+<div class="fixed"></div>
+<!-- centered block -->
+<div class="centered"></div>
+<!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; -->
+<div class="mt-10"></div>
+<div class="mt-5"></div>
+<!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; -->
+<div class="pt-10"></div>
+<div class="pt-5"></div>
+
+ +
+ +
+

Display utilities are used for display and hidden things.

+
+ + +
+<!-- display: block; -->
+<div class="block"></div>
+<!-- display: inline; -->
+<div class="inline"></div>
+<!-- display: inline-block; -->
+<div class="inline-block"></div>
+<!-- display: flex; -->
+<div class="flex"></div>
+<!-- display: inline-flex; -->
+<div class="inline-flex"></div>
+<!-- display: none; -->
+<div class="hide"></div>
+
+
+ +
+
+

Text utilities are used for text alignment, styles and overflow things.

- + 
+<!-- left-aligned text -->
+<div class="text-left"></div>
+<!-- center-aligned text -->
+<div class="text-center"></div>
+<!-- right-aligned text -->
+<div class="text-right"></div>
+<!-- justified text -->
+<div class="text-justify"></div>
+
+<!-- Lowercased text -->
+<div class="text-lowercase"></div>
+<!-- Uppercased text -->
+<div class="text-uppercase"></div>
+<!-- Capitalized text -->
+<div class="text-capitalize"></div>
+
+<!-- Noral weight text -->
+<div class="text-normal"></div>
+<!-- Bold text -->
+<div class="text-bold"></div>
+<!-- Italicized text -->
+<div class="text-italic"></div>
+
+<!-- Overflow behavior: display an ellipsis to represent clipped text -->
+<div class="text-ellipsis"></div>
+<!-- Overflow behavior: truncate the text -->
+<div class="text-clip"></div>
+<!-- Text may be broken at arbitrary points -->
+<div class="text-break"></div>
+
+ +
+
+
+

Shape utilities are used for change element shapes.

+
+ + +
+<!-- rounded element -->
+<div class="rounded"></div>
+<!-- circle element -->
+<div class="circle"></div>
-- cgit v1.3.1-23-gd82d