189 8069 5689

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

1、菜单的显示及各种Bootstrap图标

我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小不同,我们利用Bootstrap的图标,都是从Bootstrap图标库里面的内容。

成都创新互联公司专业为企业提供横县网站建设、横县做网站、横县网站设计、横县网站制作等企业网站建设、网页设计与制作、横县企业网站模板建站服务,十多年横县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

Bootstrap图标库里面分为了三类内容:

Font Awesome:Bootstrap专用图标字体,Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。

如下面是部分Font Awesome 的图标:

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用


Simple Icons:收集众多网站的Logo,并提供高质量、不同尺寸的png格式图片给广大网友,所有Icon版权归其所属公司。

如下面所示是Simple Icons的部分图标:

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用


Glyphicons:包括200个符号字体格式图表集合,由Glyphicons提供,Glyphicons Halflings 一般是收费的,但是经过Bootstrap和Glyphicons作者之间的协商,允许开发人员不需要支付费用即可使用。

如下是部分Glyphicons内容:

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

 

利用这几种图标内容,我们引入下面几种样式就可以了。



这几种图标,都是支持各种Bootstrap的主题化显示的,如下面几种效果所示。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

或者也可以把图标变大一些:

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

 

2、各种Bootstrap的图标的提取

我们通过上面的介绍,估计对这几种Bootstrap的图标有了一定的了解,但是我们如果要能够在菜单编辑里面选择图标,那么我们还是需要把这些信息提取到数据库里面,然后展示出来给我进行选择的,否则无法做到动态配置。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

如上面的编辑界面,对菜单的Web图标提供了动态的选择,那么我们如果数据库里面记录了上面几种图标的集合,那么我们就可以把它在界面进行展示,并可以从中选择合适的图表了。

根据上面的几个样式文件,我们分析一下,如对于font-awesome.min.css的文件内容,它对于图标定义部分如下所示。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

而对于simple-line-icons来说,它的样式定义也差不多,如下所示。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

对于Glyphicons来说,它的样式定义也是很类似的,如下所示。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

根据这几种信息,我们就可以通过正则表达式匹配的方式,把我们所需要的信息提取出来,并存储在数据库里面即可实现图标动态显示和选择的第一步了。

例如,我们定义部分变量和正则表达式来处理这些文件内容:

string regex = "^\\.(?.*?):before\\s*\\{";
List filePathList = new List()
{
	"~/Content/themes/metronic/assets/global/plugins/bootstrap/css/bootstrap.css",
	"~/Content/themes/metronic/assets/global/plugins/font-awesome/css/font-awesome.css",
	"~/Content/themes/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.css",
};

然后通过读取文件内容,并进行匹配记录获取即可提取出来集合内容了。

    string content = FileUtil.FileToString(realPath);
    List matchList = CRegex.GetList(content, regex, 1);

最后我们把这些信息保存到数据库表里面即可。

    BootstrapIconInfo info = new BootstrapIconInfo()
    {
        DisplayName = item,
        ClassName = prefix + item,
        CreateTime = DateTime.Now,
        SourceType = sourceType,
    };

    BLLFactory.Instance.Insert(info);

最后记录存储在数据库里面,效果如下所示,里面已经记录我们所需的图标信息了,这样在实际使用的时候,就可以利用各个字段的信息,显示出好看的界面了。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

 

3、Bootstrap的图标显示和选择

我们通过文件读取并以正则表达式提取出内容,然后保存到数据库后,这些图标信息就可以为我们使用了,可以在页面里面分类显示出来,每类的图标进行分页处理,方便查询,如下所示。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

这部分的显示页面代码和常规的数据显示差不多的,只是不需要表头信息而已,我们来看看页面代码如下所示。


	
		 
			图标信息
		
每页显示 100 条记录   共有记录:0条,总页数:0页。

其中主要的图标显示内容在上面这部分的HTML里面。

动态获取并生成HTML代码显示在界面上的处理脚本如下所示。

$.getJSON(iconUrl + "&" + condition, function (data) {
	$("#icon_body").html("");
	$.each(data.rows, function (i, item) {
		var tr = "";
		tr += "    ";//
		//tr += "
" + item.DisplayName + "
"; tr += ""; $("#icon_body").append(tr); });

用户选择对应的图标后,我们可以通过脚本设置Span的样式就可以显示出来我们选中的图标了,如下所示。

$("#i_WebIcon").attr("class", classname);

当然我们选择图标的时候,提供一个弹出的对话框显示分类不同的图标,让用户选择后返回即可。

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

这样我们就完成了,从图标文件里面提取不同类型的图表,然后存储在数据库里面,并在页面里面显示出来,可供我们动态选择和设置了。


分享名称:基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
文章转载:http://cdxtjz.cn/article/ppdseo.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。