BootStrap框架
BootStrap框架采用的是栅格式布局,12格,每列的距离用百分比,以适应不同的屏幕,格子与格子的间距为30px;
width:1000px !important
}
//container为我们要布置的内容区域,可以并列存在多个,但是不能嵌套。
row:行
col-xs-num//num为数字1——12,此行的意义是定义元素所占的宽度
col-xs-push-num//num为数字,把元素向右推num格,不会影响原先排在他后面的元素
col-xs-pull-num//num为数字,把元素向左推num格,不会影响原先排在他前面的元素
col-xs-offset-num//把元素及右边的元素一起向右推num格。
嵌套的规则:
行套列,列套行,不能行套行,列套列。
使用BootStrap框架,只需要找到自己想要的代码,在自己页面中改变class值即可。
BootStrap框架的更多相关文章
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- bootstrap框架禁用谷歌字体
bootstrap框架禁用谷歌字体 H5框架换字体.png
- css去掉使用bootstrap框架后打印网页时预览效果下的超链接
在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...
- 响应式设计,bootstrap框架的IE兼容问题
学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...
随机推荐
- AES,RSA对称加密和非对称加密
1.关于RSA加密机制:是非对称加密方式,两个钥,公钥和私钥,公钥用于加密数据,可以分享给其他用户,私钥可以用于解密用公钥加密的数据,关于安全问题是公钥泄露不会影响安全问题,公钥与私钥是一一对应的关系 ...
- refactor window_x64微信小程序环境搭建
所需文件地址如下: https://github.com/zsyzsy/weixinxiaochengxun 1.下载微信开发工具0.7.0_x64 安装完成后,打开程序,进行微信扫码登录 2.下 ...
- 去除 Google 重定向
1. 安装插件 redirector : https://code.google.com/p/chrome-redirector/ 2. 配置规则,如下: 匹配:https?://www\.googl ...
- SQL数据库索引查询
SELECT IA_ID,IA_Title,IT_ParentID,IA_Content,IA_CreateDate,IA_Author, )))) AS States FROM dbo.InfoAr ...
- gulp教程之gulp-rev-append
简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...
- html/css小练习1
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAywAAAFgCAIAAADW6Wr0AAAgAElEQVR4nOzdd1xT5+L48bJlhUAGCY
- IIS部署WCF网站服务步骤
一开始在“管理工具”下找不到IIS的快捷方式,是因为系统默认未打开IIS功能,所以首先打开IIS功能: 为避免出现未知的麻烦,建议将IIS下的所有项都勾上: 创建IIS桌面快捷方式: 添加网站托管: ...
- 关于MVC4项目从32位机移到64位机编译报错解决方案
早上写了个MVC WEBAPI的demo 机子环境是:XP SP3+ VS2010 + ASP.NET MVC4 然后晚上拿回笔记本进行编译运行,结果报错如下: “/”应用程序中的服务器错误. 分析器 ...
- [划分树] POJ 2104 K-th Number
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 51732 Accepted: 17722 Ca ...
- wxPython入门练习代码 三
DoubleEventFrame.py: #!/usr/bin/env/ python import wx class DoubleEventFrame(wx.Frame): def __init__ ...