Admin UI and Example UI

Admin UI

เนื่องจากโปรแกรมสามารถเปิดให้โค้ดได้หลาย Framework โดยการ @push('package-scripts') และ @push('package-style') จากหัวข้อ Javascript CSS Framework ส่วน Apps ที่ Generate ขึ้นมาใหม่ โปรแกรมได้ติดตั้ง CSS Bootstrap Framework ไว้ให้แล้ว ส่วน JS นั้นจะต้อง Incloud เข้ามาเอง

Ref. https://getbootstrap.com/

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

While containers can be nested, most layouts do not require a nested container.

Container

Container Fluid

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Container and Grid Layout

Create a fully responsive, fluid and nestable grid layout.
การใช้ Container โดยกำหนดขนาดความกว้างสูงสุดเท่ากับ 1140px เพื่อเหมาะสมกับ Resolution 1366px ภายในประกอบด้วย Grid ดังนี้

DeveloperDashboard

Title

This is a text box. Write your own content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box. Write your own content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.


Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.

Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.

Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.

Container Fluid and Grid

DeveloperDashboard

Title

This is a text box. Write your own content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box. Write your own content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box. Write your own content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.


Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box.

Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box.

Title

This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box.

Box Panel

แบบที่ 1

DeveloperDashboard

Write your own content here.

แบบที่ 2

DeveloperDashboard

Write your own content here.
Write your own content here.

แบบที่ 3

DeveloperDashboard

Write your own content here.
Write your own content here.
Write your own content here.

แบบที่ 4

DeveloperDashboard

Write your own content here.
Write your own content here.
Write your own content here.
Write your own content here.

แบบที่ 5

DeveloperDashboard

Write your own content here.
Write your own content here.

แบบที่ 6

DeveloperDashboard

Write your own content here.
Write your own content here.
Write your own content here.

Card Panel

DeveloperDashboard

Featured
Title

This is a text box. Write your own content here.

Button

table

Table

DeveloperDashboard

# Heading Heading Heading
1 Data Data Data
2 Data Data Data
3 Data Data Data

Button

Button Group

DeveloperDashboard

Buttons

DeveloperDashboard

HTML a Tag

  

Green Button Red Button Blue Button Gray Button

HTML button Tag

  

HTML input Tag

  

Form

DeveloperDashboard

Form Inline Label

DeveloperDashboard

Tab

Tab Horizontal

DeveloperDashboard


1. Write your own content here.


2. Write your own content here.


3. Write your own content here.

Tab Vertical

DeveloperDashboard

1. Write your own content here.
1. Write your own content here.
1. Write your own content here.
1. Write your own content here.

Admin UI Example

ยกตัวอย่างการนำ Bootstrap Framework มาใช้ในโปรแกรม

DeveloperDashboard

Total Active


1,500 Website

License


100 License

Welcome


This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services. This is a text box.

Users


500

Pages


20

Posts


40

System


5
Featured
Click
Title

This is a text box. Write your content here. This is an excellent place for you to add a paragraph and let your visitors know more about you and your services.

Button
All Users
# First Last Email
1 Morgan Lavender m@@company.com
2 Jacob Thornton j@@company.com
3 Cristina Smith c@@company.com

All Users

# First Last Email
1 Morgan Lavender morgan@@company.com
2 Jacob Thornton jacob@@company.com
3 Cristina Smith cristina@@company.com