返回首页
当前位置: 主页 > 网络编程 > Php实例教程 >

Bootstrap栅格系统自适应布局侧边栏实例教程

时间:2017-07-12 21:58来源:知行网www.zhixing123.cn 编辑:麦田守望者

这次是关于 Bootstrap 前端框架的使用技巧 ,
相信用过 Bootstrap 框架的朋友都知道栅格系统,通过栅格系统可以方便地制作出自适合各种设备的网页 , 本文说说 Bootstrap 栅格系统在网页侧边栏的应用技巧 。

Bootstrap栅格系统侧边栏布局 

图片中红线圈出的部分使用了 Bootstrap 栅格系统进行布局,支持不同分辨率的设备。

Bootstrap栅格系统自适应布局代码图 

这是 HTML 部分的代码截图,主要使用了 .row     .col-md-3        .col-sm-6         .col-xs-6 等几个样式类,需要说的是 col-xx-N 这样的类必须放在 .row 中;另外 .row 必须放在 .container 类中,每个页面只需要一个 .container 类就好了 。

默认一行显示4个图标链接,使用 col-md-3 表示占用 .row 宽度的 3/12 , 4个图标刚好是占满整行 ; col-sm-6 对应的是小屏幕(平板);col-xs-6 对应的是超小屏幕(手机), 按照效果平板、手机上每行只显示2个图标链接 。

CSS代码截图 

接着使用 CSS 将 col-md-3 下的内容居中一下,这样图标链接就能排列地更整洁 。

顶一下
(0)
0%
踩一下
(0)
0%
标签(Tag):Bootstrap栅格系统
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
猜你感兴趣