BootStrap学习------栅格

使用Bootstrap前端框架-栅格要点

1.使用Bootstrap需要引入的css和js:

(1)bootstrap.min.js

(2)bootstrap.min.css

2.栅格系统需要通过<div class="container"> 进行承载

3.div相比于table更适合目前的开发，友好度较高

4.栅格参数

<768px(手机)	>=768px(Pad)	>=992px（小型显示器）	>=1200px(宽屏显示器)
.col-xs-	.col-sm-	.col-md-	.col-lg-
Auto	~62px	~81px	~97px

5.一个屏幕最多承载12个栅格

6.实例

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <style>

        [class*="col-md"] {

            padding-top:15px;

            padding-bottom:15px;

            background-color:#eee;

            background-color: rgba(86,61,124,.15);

            border:1px solid #ddd;

            border:1px solid rgba(86,61,124,.2);

        }

    </style>

</head>

<body>

 <div class="container">

     <div class="row">

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

     </div>

     <div class="row">

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

     </div>

     <div class="row">

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

     </div>

 </div>

</body>

</html>

效果：

实现栅栏偏移

   <div class="row">

         <div class="col-md-3 col-md-offset-3">col-md-3</div>

     </div>

嵌套栅格

<div class="row">

         <div class="col-md-9">

             one

             <div class="row">

                 <div class="col-md-8">

                     first

                 </div>

                 <div class="col-md-4">

                     two

                 </div>

             </div>

         </div>

     </div>

排序

     <div class="row">

         <div class="col-md-9">

             col-md-9

         </div>

         <div class="col-md-3">

             col-md-3

         </div>

     </div>

     <div class="row">

         <div class="col-md-9 col-md-push-3">

             col-md-9

         </div>

         <div class="col-md-3 col-md-pull-9">

             col-md-3

         </div>

     </div>

BootStrap学习------栅格的更多相关文章

Bootstrap学习--栅格系统
响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...
bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
BootStrap学习之栅格布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...
BootStrap学习02栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
bootstrap 学习总结
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
bootstrap学习总结-css样式设计(二)
首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...
bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式做请求 get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数 get请求 ...

随机推荐

php获取checkbox复选框的内容
php获取checkbox复选框的内容由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
简进祥==iOS 3DES加密解密
3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称.它相当于是对每个数据块应用三次DES加密算法.由于计 ...
c#读取excel
Provider根据实际EXCEL的版本来设置,推荐使用ACE接口来读取.需要Access database Engine. 注意修改注册表以下两项的值为0.否则导入EXCEL当单元格内字符长度超过2 ...
USACO 3.4 Electric Fence 皮克定理
题意:在方格纸上画出一个三角形,求三角形里面包含的格点的数目因为其中一条边就是X轴,一开始想的是算出两条边对应的数学函数,然后枚举x坐标值求解.但其实不用那么麻烦. 皮克定理:给定顶点坐标均是整点( ...
说说css3布局
使用float属性或position属性布局的缺点 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&qu ...
Processing Images
https://developer.apple.com/library/content/documentation/GraphicsImaging/Conceptual/CoreImaging/ci_ ...
sql 中的运算符级别如and or not
写了这么多简单的sql,很多东西忘记得差不多了,差点连最基本sql运算符优先级都忘了.平时最常用到and or的优先级都忘了 and的优先级高于or的优先级举个例子 select * from us ...
支持向量机(SVM)入门
一.简介支持向量机,一种监督学习方法,因其英文名为support vector machine,故一般简称SVM. 通俗来讲,它是一种二类分类模型,其基本模型定义为特征空间上的间隔最大的线性分类器, ...
Redis学习-开始
C:\Program Files\Redis\redis-cli.exe 使用servicestack.redis class Program { static void Main(string[] ...
加载信息，先从数据库取出5条实现分页，鼠标向上滑动触发Ajax再加载5条，达到异步刷新，优化加载。。。
php数据库取数据 <?php include("conn1.php"); include('../function/functions.php'); $page=intva ...

BootStrap学习------栅格

BootStrap学习------栅格的更多相关文章

随机推荐

热门专题