中文网: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(一)栅格系统的更多相关文章

  1. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

  2. Bootstrap的栅格系统

    Bootstrap的栅格系统 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这 ...

  3. Bootstrap 12 栅格系统

    栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mix ...

  4. bootstrap中栅格系统的原理

    1.基本结构 Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局. Bootstrap划分了四种尺寸:超小屏(手机).小屏(平板竖屏) ...

  5. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  6. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  7. 深入理解BootStrap之栅格系统(布局)

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  8. Bootstrap(5)栅格系统

    一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放 ...

  9. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

  10. BootStrap的栅格系统的基本写法(布局)

    代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...

随机推荐

  1. Jmeter(二十九) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy2(详解教程)

    1.简介 上一篇文中已经对Badboy做了一个基本上详细完整的介绍,这一篇宏哥带你们实战一下,这一篇主要讲解和分享:录制和运行脚本.参数化 首先让我们使用N模式录制一个脚本,测试用例编号为:1.1.1 ...

  2. C语言讲义——数组和指针

    数组名表示的是这个数组的首地址.即如果有int a[10],则a 相当于&a[0]. #include <stdio.h> main() { int a[5]= {1,3,5,7, ...

  3. PowerManagerService流程分析

    一.PowerManagerService简介 PowerManagerService主要服务Android系统电源管理工作,这样讲比较笼统,就具体细节上大致可以认为PowerManagerServi ...

  4. 为什么不用UUID做主键?

    不易于存储:UUID太长,16字节128位,通常以36长度的字符串表示,很多场景不适用. 信息不安全:基于MAC地址生成UUID的算法可能会造成MAC地址泄露,这个漏洞曾被用于寻找梅丽莎病毒的制作者位 ...

  5. Asp.NetCore之AutoMapper基础篇

    应用场景 现在由于前后端技术的分离,后端程序员在使用ORM框架开发后台API接口的时候,往往会将数据库的"数据模型"直接提供给前端.而大多数时候,可能这些数据并不能够满足前端展示的 ...

  6. 【2020.11.28提高组模拟】T2 序列(array)

    序列(array) 题目描述 ​给定一个长为 \(m\) 的序列 \(a\). 有一个长为 \(m\) 的序列 \(b\),需满足 \(0\leq b_i \leq n\),\(\sum_{i=1}^ ...

  7. Splay树求第k大模板

    今天上午借着休息日得机会手撸了一下模板,终于对着模板调出来了.prev和next占用了std namespace里面的东西,然后报警我上次给关了所以.....就花了3个小时吧. inline加不加无所 ...

  8. 第14.8节 Python中使用BeautifulSoup加载HTML报文

    一. 引言 BeautifulSoup是一个三方模块bs4中提供的进行HTML解析的类,可以认为是一个HTML解析工具箱,对HTML报文中的标签具有比较好的容错识别功能.阅读本节需要了解html相关的 ...

  9. 第15.7节 PyQt入门学习:PyQt5应用构建详细过程介绍

    一. 引言 在上节<第15.6节 PyQt5安装与配置>结束了PyQt5的安装和配置过程,本节将编写一个简单的PyQt5应用,介绍基本的PyQt5应用的文件组成及相关工具的使用. 本节的应 ...

  10. PyQt(Python+Qt)学习随笔:formLayout的layoutFormAlignment 属性

    一.引言 Qt Designer的表单布局(formLayout)中,layoutFormAlignment 用于控制表单布局中所有子部件在布局框内的对齐方式(与layoutLabelAlignmen ...