语义-UI |列表
Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。该列表用于显示同一类型下的数据的组相关数据。
下面给出了所有列表示例。
示例 1:在此示例中,我们将使用 Semantic-ui 看到一些基本类型的列表。
Semantic UI
JS libraries
React
Lodash
Request
输出:
示例 2:在此示例中,我们将使用图标划分列表。
Semantic UI
Notifications
Geeksforgeeks liked your post
20 mins ago
Geeksforgeeks added you as an Intern
22 mins ago
Geeksforgeeks accepted your Request
1 hour ago
输出
示例 3:在此示例中,我们将看到个人详细信息列表。
Semantic UI
Geeksforgeeks
输出
示例 4:在此示例中,我们将看到项目符号列表。
Semantic UI
JavaScript Uses
- Web
- Mobile App
- Desktop App
-
Frameworks
- ReactJS
- NodeJS
- AngularJS
输出
示例 5:在此示例中,我们将创建有序列表。
Semantic UI
JavaScript Uses
- Web
- Mobile App
- Desktop App
-
Frameworks
- ReactJS
- NodeJS
- AngularJS
输出
示例 6:在此示例中,我们将创建带有图标的列表。
Semantic UI
Semantic-UI Icons
Users Icon
This icon you can use for Users, Friends,
Friends of Friends.
World Icon
This icon you can use for globe,
notification and many more.
facebook Icon
This can be used for facebook Social Link
输出
示例 7:在此示例中,我们将创建包含图像的列表。
Semantic UI
List with Images
geeksforgeeks
A computer Science Portal
geeksforgeeks
A Computer Science Portal
geeksforgeeks
A computer Science portal
输出
示例 8:在此示例中,我们将创建描述列表。
Semantic UI
Description List
Geeksforgeeks
Learn anything related to Computer Science
Internshala
Earn while you study
Hacker Rank
Test your coding skills.
输出
示例 9:在此示例中,我们将创建浮动列表。
Semantic UI
Floated List
Basket Ball
Hockey
Table Tennis
输出