Bootstrap实现的经典栅格布局效果实例【附demo源码】

Bootstrap实现的经典栅格布局效果实例【附demo源码】

本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下：

先来看看效果图：

具体代码如下（某管理系统的Bootstrap实现）：

"http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&ltVNIgX;/head>

data-target="#bs-example-navbar-collapse-1">

Toggle navigation

data-target="#bs-example-navbar-collapse-1">

Toggle navigation

某管理系统

功能

登录

<!—自适应布局-->

<!—左侧导航栏-->

<!—右侧管理控制台-->

<!—一组按钮控件-->

操作1

操作2

操作3

操作4

操作5

操作6

<!—panel面板，里面放置一些控件，下同-->

<!—panel面板的标题，下同-->

<!—panel面板的内容，下同-->

提示您的订单（2014001）已经审批通过！

提示您的订单（2014002）被打回！

提示您的订单（2013001）客户付款延迟！

42

订单审批

20

收款确认

10

付款确认

查看详细?

aria-valuemin="0" aria-valuemax="100" style="width: 60%">80% Complete

aria-valuemin="0" aria-valuemax="100" style="width: 80%">30% Complete (danger)

附：完整实例代码点击此处本站下载。

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：

http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。