Materialise CSS集合 _MaterializeCSS

物化CSS集合可帮助你将列表对象分组在一起。它代表各种类型的集合, 其中集合是一组相关的信息项。
【Materialise CSS集合】在Materialize CSS集合中使用的类名列表：

Index	Class name	Description
1)	collection	它用于将div或ul容器设置为集合。
2)	collection-item	用于将a或li项目设置为收集项目。
3)	active	用于将a或li项目显示为活动收集项目。
4)	with-header	它用于标记集合具有标题。
5)	collection-header	用于将a或li项目设置为集合标头。
6)	avatar	用于将a或li项目设置为头像项目。
7)	dismissible	它用于使收集项目被刷掉。它仅适用于触摸屏设备。

例子例子1

< html> < head> < title> The Materialize Collections Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h3> Simple Collection< /h3> < hr/> < ul class = "collection"> < li class = "collection-item"> HTML 5< /li> < li class = "collection-item"> JQuery< /li> < li class = "collection-item"> JavaScript< /li> < li class = "collection-item"> CSS< /li> < /ul> < /body> < /html>

立即测试
例子2

< !DOCTYPE html> < html> < head> < title> The Materialize Collections Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h3> Collection of Links< /h3> < hr/> < div class = "collection"> < a href = "http://www.srcmini.com/#" class = "collection-item"> HTML 5< /a> < a href = "http://www.srcmini.com/#!" class = "collection-item active"> JQuery< /a> < a href = "http://www.srcmini.com/#!" class = "collection-item"> JavaScript< /a> < a href = "http://www.srcmini.com/#!" class = "collection-item"> CSS< /a> < /div> < h3> Collection with Header< /h3> < hr/> < ul class = "collection with-header"> < li class = "collection-header"> < h3> Front End Technologies< /h3> < /li> < li class = "collection-item"> HTML 5< /li> < li class = "collection-item"> JQuery< /li> < li class = "collection-item"> JavaScript< /li> < li class = "collection-item"> CSS< /li> < /ul> < /body> < /html>

立即测试
例子3

< html> < head> < title> The Materialize Collections Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h3> Collection with Secondary Content< /h3> < hr/> < ul class = "collection"> < li class = "collection-item"> < div> HTML 5< a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> cloud< /i> < /a> < /div> < /li> < li class = "collection-item"> < div> JQuery< a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> cloud< /i> < /a> < /div> < /li> < li class = "collection-item"> < div> JavaScript< a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> cloud< /i> < /a> < /div> < /li> < li class = "collection-item"> < div> CSS< a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> cloud< /i> < /a> < /div> < /li> < /ul> < /body> < /html>

立即测试
例子4

< html> < head> < title> The Materialize Collections Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h3> Collection with Avatar< /h3> < hr/> < ul class = "collection"> < li class = "collection-item avatar"> < img alt = "html-logo.png" class = "circle"> < span class = "title"> HTML5< /span> < p> HTML5 is the next major revision of the HTML standard supersedingHTML 4.01, XHTML 1.0, and XHTML 1.1.< br/> HTML5 is a standard forstructuring and presenting content on the World Wide Web.< /p> < a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> grade< /i> < /a> < /li> < li class = "collection-item avatar"> < i class = "material-icons circle green"> insert_chart< /i> < span class = "title"> HighCharts< /span> < p> < /p> < a href = "http://www.srcmini.com/#!" class = "secondary-content"> < i class = "material-icons"> grade< /i> < /a> < /li> < /ul> < /body> < /html>

立即测试
例子5

< html> < head> < title> The Materialize Collections Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body class = "container"> < h3> Collection with dismissible content< /h3> < hr/> < ul class = "collection"> < li class = "collection-item dismissable"> HTML 5< /li> < li class = "collection-item dismissable"> JQuery< /li> < li class = "collection-item dismissable"> JavaScript< /li> < li class = "collection-item dismissable"> CSS< /li> < /ul> < /body> < /html>

立即测试