Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A placeholder is used to reserve space for content that soon will appear in a layout.
Below are examples of the different types of placeholders.
Example 1:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< h2 >Placeholder</ h2 >
< div class = "ui placeholder" >
< div class = "image header" >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "line" ></ div >
< div class = "line" ></ div >
< div class = "line" ></ div >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output
Example 2:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< h3 >Inline Card Placeholder</ h3 >
< div class = "ui four column grid" >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "image header" >
< div class = "short line" ></ div >
< div class = "medium line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "large line" ></ div >
< div class = "medium line" ></ div >
</ div >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "image header" >
< div class = "short line" ></ div >
< div class = "medium line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "large line" ></ div >
< div class = "medium line" ></ div >
</ div >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "image header" >
< div class = "short line" ></ div >
< div class = "medium line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "large line" ></ div >
< div class = "medium line" ></ div >
</ div >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "ui raised segment" >
< div class = "ui placeholder" >
< div class = "image header" >
< div class = "short line" ></ div >
< div class = "medium line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "large line" ></ div >
< div class = "medium line" ></ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output
Example 3: This is the placeholder for Image.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< h3 >Placeholder for Images</ h3 >
< div style = "width: 150px;" class = "ui placeholder" >
< div class = "image" ></ div >
</ div >
< div style = "width: 150px;" class = "ui placeholder" >
< div class = "image" ></ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output
Example 4: This is for the inverted Placeholders.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< h3 >Inverted Placeholders</ h3 >
< div class = "ui inverted segment" >
< div class = "ui active inverted placeholder" >
< div class = "image header" >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "line" ></ div >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
</ div >
</ div >
< div class = "ui inverted segment" >
< div class = "ui active inverted placeholder" >
< div class = "image header" >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
< div class = "paragraph" >
< div class = "line" ></ div >
< div class = "line" ></ div >
< div class = "line" ></ div >
</ div >
</ div >
</ div >
</ div >
< script src =
</ script >
</ body >
</ html >
|
Output
Article Tags :