Web前端框架 小记

一、首推Bootstrap，可以说是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。  

http://v3.bootcss.com/

二、amazeUI 开源 HTML5 跨屏前端框架，重点是跨屏！里面还有一个云适配，觉得应该是很不错的一个项目，有前景。  http://amazeui.org/

三、getuikit 一个轻量级、模块化的前端框架、可快速构建强大的web前端界面  http://www.getuikit.net/index.html

四、Wijmo 貌似要购买，先留着看看http://wijmo.gcpowertools.com.cn/

 

五、体验

 看来看去还是先把Bootstrap拿来体验一番！

用到这些前端框架实在无奈啊，对于我这个屌丝，页面布局、美工丝毫不感冒！一想到开发中的UI就头疼，现在好啦，有了框架，一切都美好了。

下面就模仿 http://www.ghostchina.com/about/ 这个站点，使用一下Bootstrap吧。

就喜欢这种风格的。

动手，浏览器的开发者工具

找到你了 mian.min.css 文件，然后就可以修修改改：

利用collapse 插件


  1 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  2                                 <div class="panel panel-default">
  3                                     <div class="panel-heading">
  4                                         <h4 class="panel-title">
  5         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  6           个人信息
  7         </a>
  8       </h4>
  9                                     </div>
 10                                     <div style="" id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
 11                                         <div class="panel-body">
 12                                             <ul>
 13                                                 <li>姓名：张鹏浩</li>
 14                                                 <li>学校：福建师范大学</li>
 15                                                 <li>专业：计算机科学与技术</li>
 16                                                 <li>电话：18649823229</li>
 17                                                 <li>邮箱：boyadon@sina.com</li>
 18                                                 <li>博客：<a href="http://www.cnblogs.com/MicroHao/">MicroHao</a> 
 19                                                 </li>
 20                                             </ul>
 21                                         </div>
 22                                     </div>
 23                                 </div>
 24                                 <div class="panel panel-default">
 25                                     <div class="panel-heading">
 26                                         <h4 class="panel-title">
 27         <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 28           奖励情况
 29 
 30         </a>
 31       </h4>
 32                                     </div>
 33                                     <div style="" id="collapseTwo" class="panel-collapse collapse in" role="tabpanel">
 34                                         <div class="panel-body">
 35                                             <ul>
 36                                                 <li>福建师范大学校优秀学生社会工作奖学金</li>
 37                                                 <li>福建师范大学校优秀学生二等奖学金</li>
 38                                                 <li>福建师范大学应用科技学院技能大赛网页设计二等奖</li>
 39                                             </ul>
 40                                         </div>
 41                                     </div>
 42                                 </div>
 43                                 <div class="panel panel-default">
 44                                     <div class="panel-heading">
 45                                         <h4 class="panel-title">
 46         <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 47           工作经验/社会实践
 48         </a>
 49       </h4>
 50                                     </div>
 51                                     <div style="" id="collapseThree" class="panel-collapse collapse in" role="tabpanel">
 52                                         <div class="panel-body">
 53                                             <ul>
 54                                                 <li>大一至今，担任班长一职，并获得校优秀学生社会工作奖学金；</li>
 55                                                 <li>2012年，福建省思灿信息科技有限公司 （开发威动网订票模块）;</li>
 56                                                 <li>2012年，福州尚博信息科技有限公司 （维护管理“福建12315消费维权系统”、安徽联通“手机Q字秀”增值业务系统）;</li>
 57                                                 <li>2013年，为国内某Win8应用市场制作了一些Win8、Wp8的App；</li>
 58                                                 <li>2013年，福州百业众信网络技术有限公司 （开发SEO网站管理后台系统、及SEO数据抓取服务、福州中金恒丰公司网站）。</li>
 59                                             </ul>
 60                                         </div>
 61                                     </div>
 62                                 </div>
 63                                 <div class="panel panel-default">
 64                                     <div class="panel-heading">
 65                                         <h4 class="panel-title">
 66         <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
 67           IT技能
 68         </a>
 69       </h4>
 70                                     </div>
 71                                     <div style="" id="collapseFour" class="panel-collapse collapse in" role="tabpanel">
 72                                         <div class="panel-body">
 73                                             <ul>
 74                                                 <li>入门语言VB，主要写过一个QQ聊天自动回复程序；</li>
 75                                                 <li>C#是大学以来熟练掌握的语言，开发了许多winfrom程序 (如：密码管理、U盘锁屏、Socket聊天等)；运用于实习期间的web开发，学习了MVC的开发架构和基于WCF的WebService；
 76                                                 </li>
 77                                                 <li>还自学了JavaScript、Css、Html5、PHP、Nodejs，使用PHP开发“微信公众号”、“我的旅游路线”小应用；使用Nodejs开发“班级综合测评提交管理”；
 78                                                 </li>
 79                                                 <li>Java虽然在课程项目学习较好，但未应用于工作开发（学习过winfrom、web、android）；在Ubuntu系统下对Python、Go语言基础的使用；
 80                                                 </li>
 81                                                 <li>学习使用Arduino，通过微信平台监控宿舍温湿度；
 82                                                 </li>
 83                                                 <li>因为担任班长的工作原因对于office办公软件也较为熟练的掌握。
 84 
 85                                                 </li>
 86                                             </ul>
 87                                         </div>
 88                                     </div>
 89                                 </div>
 90                                 <div class="panel panel-default">
 91                                     <div class="panel-heading">
 92                                         <h4 class="panel-title">
 93         <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
 94           兴趣爱好
 95         </a>
 96       </h4>
 97                                     </div>
 98                                     <div style="" id="collapseFive" class="panel-collapse collapse in" role="tabpanel">
 99                                         <div class="panel-body">
100                                             <ul>
101                                                 <li>游泳&amp;Coding，其实也很喜欢各地走走看看！</li>
102                                                 <li>现阶段喜欢健身，目的是为了减肥还有强健的身体！</li>
103                                                 <li>然后没有然后了~~</li>
104                                             </ul>
105                                         </div>
106                                     </div>
107                                 </div>
108                             </div>
View Code

 

然后发现都是折叠着的，怎么办呢？看看文档呗。

Make expand/collapse controls accessible

Be sure to add aria-expanded to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the in class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

Additionally, if your control element is targetting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you may add an additional aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

 

  • .collapse hides the content
  • .collapse.in shows the content

原来是这个

        <script type="text/javascript">
            $(".collapse").collapse('show')
        </script>

这个也能控制！

posted @ 2014-10-22 11:29  MicroHao  阅读(359)  评论(0)  编辑  收藏  举报