From be74a7866efaa33559a6c173c55a008db5be57ab Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 11 Mar 2017 18:13:22 +0800 Subject: Update docs text --- docs/elements.html | 61 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 29 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 4955e02..517db95 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -199,7 +199,7 @@

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

-

Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.

+

Use the lang attribute or add the cjk class to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.

@@ -320,8 +320,8 @@
-

Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.

-

Use the class active to make <tr> element highlighted.

+

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

+

Use the active class to make <tr> element highlighted.

@@ -373,7 +373,7 @@
-

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.

+

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the loading class can show loading indicator.

@@ -386,7 +386,7 @@
-

Add the class disabled or the attribute disabled for a disabled button.

+

Add the disabled class or the disabled attribute for a disabled button.

@@ -419,8 +419,8 @@
-

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.

-

Please note that you could use the class btn-action for a square button, or add another class circle for a round button, which is often used as a Float Action Button (FAB).

+

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

+

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

@@ -441,7 +441,7 @@
-

Icons with the class icon can be correctly rendered in each button size.

+

Icons with the icon class can be correctly rendered in each button size.

@@ -484,7 +484,7 @@
-

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

+

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

@@ -608,7 +608,7 @@

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

-

If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout.

+

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] class to the child elements for form row layout.

@@ -787,7 +787,7 @@

Form validation styles

-

To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.

+

To use form validation styles, add is-success or is-danger class to the controls or add has-success or has-danger class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

@@ -831,14 +831,14 @@ <!-- form validation class: has-success --> <div class="form-group has-success"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-1" placeholder="..." /> <p class="form-input-hint">The name is invaild.</p> </div> <!-- form validation class: is-success --> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input is-success" type="text" id="input-example-1" placeholder="..." /> <p class="form-input-hint">The name is invaild.</p> </div> </form> @@ -922,31 +922,34 @@
-

If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.

+

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

<!-- normal input group -->
 <div class="input-group">
-  <span class="input-group-addon">slack.com/</span>
-  <input type="text" class="form-input" placeholder="site name" />
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="..." />
 </div>
 
 <!-- large input group -->
 <div class="input-group">
-  <span class="input-group-addon addon-lg">slack.com/</span>
-  <input type="text" class="form-input input-lg" placeholder="site name" />
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="..." />
 </div>
 
 <!-- normal input group with button -->
 <div class="input-group">
-  <span class="input-group-addon">slack.com/</span>
-  <input type="text" class="form-input" placeholder="site name" />
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="..." />
   <button class="btn btn-primary input-group-btn">Submit</button>
 </div>

Form disabled styles

+
+

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

+
@@ -1011,7 +1014,7 @@
-

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-danger for a primary colored label.

+

Add the label class to <span> or <small> elements. You can add another class label-primary, label-success, label-warning and label-danger for a primary colored label.

@@ -1026,7 +1029,7 @@

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>.

-

For multiline code snippet blocks, you can use <pre> with the class code as a container, and add <code> inside it. The attribute data-lang is rendered as the language name in the top right.

+

For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

@@ -1043,7 +1046,7 @@

Media

Media includes responsive images, figures and video classes.

-

Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

+

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

@@ -1051,11 +1054,11 @@
-
<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
+
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="..." />
 

 
           

-            
You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.  

+            
You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.  

           

           

             

@@ -1067,13 +1070,13 @@
           

 
 
<figure class="figure">
-  <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+  <img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="..." />
   <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
 </figure>
 

 
           

-            
For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

+            
For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

           

           

             

@@ -1084,8 +1087,8 @@
           

 
 
-
<div class="video-responsive">
-  <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+
<div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
 </div>
 

 
-- 
cgit v1.3.1-23-gd82d