bootstrap的简单实用
2017-10-07 12:53
176 查看
原作者
bootstrap把根据屏幕大小把屏幕分为了4个层级
超小屏幕
小屏幕
中等屏幕
大屏幕
栅格参数,我们看下下面这幅图:
每行的数字全部相加,最终都等于刚刚我让大家记住的12
我现在需要在页面上左右分别显示两个面板,面板上面显示相应的表格数据,且左侧列表占总宽度的3分之2,右侧的面板仅占3分之1
刚刚已经创建好了一个基本的页面布局,页面上显示了“你好,世界!”
现在我们在这个框架上面接着写:
1. 删除刚刚的“你好,世界!”,新建两个div
左侧占用3分之2,12的3分之2为8,所以上面一个div设置为8,剩下的一个设为4,好了,第一步完成了。
2. 8和4里面建立两个面板,在bootstrap官网找到面板,复制代码如下:
左侧的panel占据了页面的3分之2,右侧的仅为3分之1,第二步也完成了。
3. 创建表格,在bootstrap官网找到表格的代码:官网地址
整个过程我都在粘贴复制,完全一个代码都没有写,这样做的好处是,我们开发起来很简单,而且兼容ie8以上、Firefox、Google等主流浏览器,基本方法就是这样
bootstrap的具体使用方法
bootstrap其实是把网页等分为了12分栅格参数
bootstrap把根据屏幕大小把屏幕分为了4个层级
超小屏幕
小屏幕
中等屏幕
大屏幕
栅格参数,我们看下下面这幅图:
每行的数字全部相加,最终都等于刚刚我让大家记住的12
我现在需要在页面上左右分别显示两个面板,面板上面显示相应的表格数据,且左侧列表占总宽度的3分之2,右侧的面板仅占3分之1
刚刚已经创建好了一个基本的页面布局,页面上显示了“你好,世界!”
现在我们在这个框架上面接着写:
1. 删除刚刚的“你好,世界!”,新建两个div
<div class="col-md-8"></div> <div class="col-md-4"></div>
左侧占用3分之2,12的3分之2为8,所以上面一个div设置为8,剩下的一个设为4,好了,第一步完成了。
2. 8和4里面建立两个面板,在bootstrap官网找到面板,复制代码如下:
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
左侧的panel占据了页面的3分之2,右侧的仅为3分之1,第二步也完成了。
3. 创建表格,在bootstrap官网找到表格的代码:官网地址
<div class="col-md-8"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div>
整个过程我都在粘贴复制,完全一个代码都没有写,这样做的好处是,我们开发起来很简单,而且兼容ie8以上、Firefox、Google等主流浏览器,基本方法就是这样
相关文章推荐
- 基于Bootstrap简单实用的tags标签插件
- 打造简单实用的Thinkphp分页样式(Bootstrap版本)
- bootstrap-简单实用的垂直手风琴滑动菜单列表特效
- Bootstrap非常简单实用的web前端开发框架
- bootstrap 模态框的简单实用案例
- Javascript url地址传参及获取参数的简单实用方法(利用正则表达式)
- angularJs的双向数据绑定,简单实用
- mysql安装、设置、简单实用
- UIWindow的简单实用(二)
- [置顶] [Unity3D插件]FingerGesture的简单实用
- EventBus3.0的简单实用
- bootstrap 上传图片插件 file-input 的简单使用
- libcurl安装使用方法-简单实用(摘录)
- samba最简单实用
- subclipx v1.07 - 简单实用的轻量级多维剪贴板工具
- 你必须知道的 34 个简单实用的 Ubuntu 快捷键
- iOS开发-讯飞语音识别SDK简单实用
- hovertree插件实现二级树形菜单(简单实用)
- asp.net中sitemap的简单实用
- iOS 简单实用的圆形进度条