Amazeui notes-css Layout related

Css

Divide the grid:

　　　　

Description: The. Am-avg-sm-2 number indicates that several chapters set the <li> width of the child element to 50% .

Can only be used <ul> / <ol> structure

Auxiliary classes:

Basic container: . Am-container

Horizontal scrolling: .am-scrollable-horizontal Displays the horizontal scroll bar when the content exceeds the width of the container.

Vertical scrolling: .am-scrollable-vertical Displays the scroll bar after the content exceeds the height of the setting, and the default setting is the height 240px .

Floating correlation:

　　　　.am-cf-Clear floating

　　　　.am-nbfc-Use overflow: hidden; to create new BFC to clear floating

　　　　.am-fl-Left float

　　　　.am-fr-Floating Right

　　　　.am-center-Horizontal centering

Vertical alignment/Bottom alignment:

　　　　

　　　　

Display Properties:

• .am-block- display set toblock
• .am-inline- display set toinline
• .am-inline-block- display set toinline-block

Hidden properties:. am-hide

<!--hidden, the Demo can't see the button--
<button class= "am-btn am-btn-danger am-hide" >i ' m hidden.....</button>

Internal and external margins:

Size

• xs-5px
• sm-10px
• Default-16px
• lg-24PX
• xl-32px

The class list is not sized to the default size (16px) and {size} can be 0, xs, sm, lg, xl one of the.

　　　　

Text tools: Fonts. Am-sans-serif

Text color:

am-text-primary

am-text-secondary

am-text-success

am-text-warning

am-text-danger

Link Color Dodge: .am-link-muted class Sets the link color to gray.

Text Size:

• .am-text-xs-12px
• .am-text-sm-14PX
• .am-text-default-16PX
• .am-text-lg-18px
• .am-text-xl-24PX
• .am-text-xxl-32px
• .am-text-xxxl-42px

Text-to-left alignment:

　　

Text Vertical alignment:

• .am-text-top-Top Alignment
• .am-text-middle-Center Alignment
• .am-text-bottom-Bottom Alignment

Word Wrapping and truncation:

　　

Picture-and-text mixed-line assistance:

• .am-align-left
• .am-align-right

Responsive assistance:

Viewport size .am-[show|hide]-[sm|md|lg][-up|-down|-only] , resize the browser window to view the explicit element.

       downRefers to less than the interval, refers to up greater than the interval, only refers to only in this interval.

Cases:

• .am-show-sm-only: Display only in sm intervals
• .am-show-sm-up: sm display when greater than interval
• .am-show-sm: In the sm interval display, if there is no setting md , lg the interval of the explicit, then the element is displayed in all intervals
• .am-show-md-down: md display when less than interval

Screen Orientation:

• Horizontal screen: .am-show-landscape ,.am-hide-landscape
• Vertical screen: .am-show-portrait ,.am-hide-portrait

Amazeui notes-css Layout related