bootstrap charisma 入门学习笔记
分类：前端开发
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。而Charisma是一套全功能的，免费，会员质量的响应式HTML5管理员界面模板，基于"Bootstrap"，拥有了9套不同的主题颜色内容，可以满足你的不同需要！
本篇主要说说charisma的简单应用。首先，官网。我对官网的东西做了一定的精简。在这里下载。有些东西不属于charisma的，为了方便，我将其放在一个目录下。其次是我精简的里面除了皮肤css外，其他所有css和js都需要引用。另外我对皮肤css做了一定修改，具体修改为，在每个css最后加了几个类，比如设置背景色、边框等。
注：这框架不兼容IE6（官方不打算支持的），在IE8、9下显示有少量问题，，IE-Edge与chrome、ff等可以达到最佳显示效果。视情况使用。
另外简单说说响应式编程与非响应式编程的区别。响应式意思就是根据屏幕的宽度来动态调整元素的位置，一般用于兼容多种屏幕与手机浏览器。非响应式就是各种屏幕看到的效果一样（小屏幕容易导致文字溢出等问题）。使用响应式编程，使用响应式编程，使用响应式编程，重要的事情说三遍。在宽屏浏览器中响应式编程完全不会影响显示效果，在窄屏浏览器中也可以达到最佳显示效果。并且两者难度相当。所以，你懂得。
进入正题。首先我给出一个响应式charisma框架代码，页面可以直接在框架代码基础上开发。
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link id="bs_css" rel="stylesheet" href="charisma/css/bootstrap-slate.min.css" /><link rel="stylesheet" href="charisma/css/charisma-app.css" /><link rel="stylesheet" href="charisma/css/animate.min.css" /><title>响应式Charisma框架</title><style type="text/css">a { text-decoration: none !important; }@-webkit-viewport { width: device-width; }@-moz-viewport { width: device-width; }@-ms-viewport { width: device-width; }@-o-viewport { width: device-width; }@viewport { width: device-width; }</style></head><body><form></form><!–[if lt IE 9]><script type="text/javascript" src="charisma/js/html5shiv.js"></script><script type="text/javascript" src="charisma/js/respond.min.js"></script><![endif]–><script type="text/javascript" src="charisma/js/jquery.js"></script><script type="text/javascript" src="charisma/js/bootstrap.min.js"></script></body></html>
简单解释下。第一行。由于Bootstrap基于HTML5，所以这行不能变。
head标签内部：除了关键的声明、自定义风格外，还有必要的css文件。其中id为bs_css的这个为皮肤，目录下有8个类似名称的css文件。直接jquery改href属性即可实现动态换肤。自定义风格第一个为去掉a标签的下划线，其他的为响应式编程必须用的，估计是设置显示宽度。
由于IE8不兼容HTML5标签，所以需要在低版本IE中引入这两个js文件。最后两个js文件必须引用。
框架说完了，说说使用。使用上直接参照官网的例子，Chrome下审查元素，想实现啥就直接复制那一堆代码，就ok了。
例子看完之后，我说说我对bootstrap皮肤的改动：
class="bg-normal" 这个表示设置背景色（用于层叠元素时非常有用）
class="bg-border" 这个用于设置边框（当源框架无法实现需求时）
class="text" 这个用来设置前景色（除了文字外还可以用来设置其他的）
class="frame" chass="framechild" 这两个用来设计自定义表格（比如LIST表格，可以用这个实现）
class="border-xxx" 这个用来设置显示哪个边框（有时候只想显示一个边框，可以试试这个）
上面几个css支持全部8种皮肤风格（网上说的9种，不知道最后一种是啥），可以直接使用。
版权声明：本文为博主原创文章，未经博主允许不得转载。
上一篇C++中Standard Template Library（STL）入门简要概况下一篇Win32 服务控制
顶0踩0
天再高又怎样，踮起脚尖就更接近阳光。
