bootstrap(一)栅格系统
中文网:http://www.bootcss.com/
官网:http://v3.bootcss.com/
需要准备:离线手册 和 软件包
项目中引用bootstrap.min.js压缩版和bootstrap.min.css。bootstrap-theme.css 这个没用上 。
官方包中需要在
js文件夹中加几个js:application.js holder.min.js 拿色素构成图片 highlight.min.js 高亮显示 jQuery.min.js 1.8.3。
bootstrap框架:
1、CSS样式
2、CSS组件
3、js插件
CSS样式:
1、栅格系统
2、排版
3、代码
4、表格
5、表单
6、按钮
7、图片
8、响应式图片
9、工具
页面大块布局:
.ccontainer
栅格系统:
一行分成12列
.row
.col-md-12
.col-xs-12
图片自动生成:
<script src="dist/js/holder.min.js"></script>
<img src="holder.js/100%x300" />
<div class="container">
<div class="row"> <div class="col-md-3">
<img src="holder.js/200x200" alt="" />
</div>
<div class="col-md-3">
<img src="holder.js/200x200" alt="" />
</div>
<div class="col-md-3">
<img src="holder.js/200x200" alt="" />
</div>
<div class="col-md-3">
<img src="holder.js/200x200" alt="" />
</div>
<div class="clearfix">
</div>
</div>
</div>
文本中间对其:
text-center;
text-left;
text-right;
块标签对齐:
pull-left; 直接放到class里面就可以用
pull-right;
center-block; <div class="col-md-4 center-block"> 这种情况下不居中,不好使,要去掉前面的col 然后加一个宽度div就会居中。
bootstrap(一)栅格系统的更多相关文章
- MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...
- Bootstrap的栅格系统
Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...
- Bootstrap 12 栅格系统
栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...
- bootstrap中栅格系统的原理
1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...
- bootstrap课程2 bootstrap的栅格系统的主要作用是什么
bootstrap课程2 bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...
- Bootstrap之栅格系统
bootstrap 移动优先 中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
- 深入理解BootStrap之栅格系统(布局)
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
- Bootstrap(5)栅格系统
一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...
- Bootstrap学习--栅格系统
响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...
- BootStrap的栅格系统的基本写法(布局)
代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...
随机推荐
- Jmeter(二十九) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy2(详解教程)
1.简介 上一篇文中已经对Badboy做了一个基本上详细完整的介绍,这一篇宏哥带你们实战一下,这一篇主要讲解和分享:录制和运行脚本.参数化 首先让我们使用N模式录制一个脚本,测试用例编号为:1.1.1 ...
- C语言讲义——数组和指针
数组名表示的是这个数组的首地址.即如果有int a[10],则a 相当于&a[0]. #include <stdio.h> main() { int a[5]= {1,3,5,7, ...
- PowerManagerService流程分析
一.PowerManagerService简介 PowerManagerService主要服务Android系统电源管理工作,这样讲比较笼统,就具体细节上大致可以认为PowerManagerServi ...
- 为什么不用UUID做主键?
不易于存储:UUID太长,16字节128位,通常以36长度的字符串表示,很多场景不适用. 信息不安全:基于MAC地址生成UUID的算法可能会造成MAC地址泄露,这个漏洞曾被用于寻找梅丽莎病毒的制作者位 ...
- Asp.NetCore之AutoMapper基础篇
应用场景 现在由于前后端技术的分离,后端程序员在使用ORM框架开发后台API接口的时候,往往会将数据库的"数据模型"直接提供给前端.而大多数时候,可能这些数据并不能够满足前端展示的 ...
- 【2020.11.28提高组模拟】T2 序列(array)
序列(array) 题目描述 给定一个长为 \(m\) 的序列 \(a\). 有一个长为 \(m\) 的序列 \(b\),需满足 \(0\leq b_i \leq n\),\(\sum_{i=1}^ ...
- Splay树求第k大模板
今天上午借着休息日得机会手撸了一下模板,终于对着模板调出来了.prev和next占用了std namespace里面的东西,然后报警我上次给关了所以.....就花了3个小时吧. inline加不加无所 ...
- 第14.8节 Python中使用BeautifulSoup加载HTML报文
一. 引言 BeautifulSoup是一个三方模块bs4中提供的进行HTML解析的类,可以认为是一个HTML解析工具箱,对HTML报文中的标签具有比较好的容错识别功能.阅读本节需要了解html相关的 ...
- 第15.7节 PyQt入门学习:PyQt5应用构建详细过程介绍
一. 引言 在上节<第15.6节 PyQt5安装与配置>结束了PyQt5的安装和配置过程,本节将编写一个简单的PyQt5应用,介绍基本的PyQt5应用的文件组成及相关工具的使用. 本节的应 ...
- PyQt(Python+Qt)学习随笔:formLayout的layoutFormAlignment 属性
一.引言 Qt Designer的表单布局(formLayout)中,layoutFormAlignment 用于控制表单布局中所有子部件在布局框内的对齐方式(与layoutLabelAlignmen ...