一、概述

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

    * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

    * 好处：

        1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

        2. 响应式布局。

            * 同一套页面可以兼容不同分辨率的设备。

二、入门使用

1. 下载Bootstrap

2. 在项目中将Bootstrap中的三个文件夹复制进去

3. 创建html页面，引入必要的资源文件

-------------------------------------------

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="js/jquery-3.2.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

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

</head>

<body>

<h1>你好，世界！</h1>

</body>

</html>

三、栅格系统

* 同一套页面可以兼容不同分辨率的设备。

* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

* 步骤：

    1. 定义容器。相当于之前的table、

        * 容器分类：

            1. container：两边留白

            2. container-fluid：每一种设备都是100%宽度

    2. 定义行。相当于之前的tr   样式：row

    3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

        * 设备代号：

            1. xs：超小屏幕 手机 (<768px)：col-xs-12

            2. sm：小屏幕 平板 (≥768px)

            3. md：中等屏幕 桌面显示器 (≥992px)

            4. lg：大屏幕 大桌面显示器 (≥1200px)

    * 注意：

        1. 一行中如果格子数目超过12，则超出部分自动换行。

        2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

        3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>栅格系统</title>

    <!-- Bootstrap -->

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

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="js/jquery-3.2.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

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

    <style>

        .inner{

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <!--1.定义容器-->

    <div class="container-fluid">

        <!--2.定义行-->

        <div class="row">

            <!--3.定义元素

            在大显示器一行12个格子

            在pad上一行6个格子

            -->

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

            <div class="col-lg-1 col-sm-2 inner">栅格</div>

        </div>

    </div>

</body>

</html>

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的栅格系统的基本写法（布局）

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

  7. Bootstrap之栅格系统

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

  8. 深入理解BootStrap之栅格系统（布局）

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

  9. Bootstrap(5)栅格系统

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

随机推荐

  1. linux启动tomcat很久或者很慢Tomcat启动时卡在“INFO: Deploying web application directory ......”的解决方法

    解决方案: 找到jdk1.x.x_xx/jre/lib/security/java.security文件,在文件中找到securerandom.source这个设置项,将其改为: securerand ...

  2. C#桌面程序启动时传入参数

    using System;using System.Collections.Generic;using System.Linq;using System.Windows.Forms; namespac ...

  3. LATEX 数学公式基本语法

    作者:@houkai本文为作者原创,转载请注明出处:https://www.cnblogs.com/houkai/p/3399646.html TEX 是Donald E. Knuth 编写的一个以排 ...

  4. 2019 荔枝java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.荔枝等公司offer,岗位是Java后端开发,因为发展原因最终选择去了荔枝,入职一年时间了,也成为了面试官,之 ...

  5. 教你玩转Git-合并冲突

    Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件.Git 与 ...

  6. 【JVM学习笔记二】垃圾收集器与内存分配策略

    1. 概述 1) GC的历史比Java久远 2) GC需要完成的三件事: | 哪些内存需要回收 | 什么时候回收 | 如何回收 3) Java内存运行时区域各个部分: | Java虚拟机栈.计数器.本 ...

  7. 创建mybatis的逆向工程

    1.mybatis的逆向工程(我使用的是maven仓库创建) 工作原理:反向工程(通过数据库中的表和字段信息去生成对应的增删改查方法) 其实就是一个自动生成工具 生成实体类(pojo)和映射文件(ma ...

  8. Android-----RadioButton单选使用（实现简单温度转换）

    废话少说,直接上代码: xml布局文件代码: <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  9. redis-5.0.5安装(linux centos)

    下载 cd /data wget http://download.redis.io/releases/redis-5.0.5.tar.gz 历史版本库地址 http://download.redis. ...

  10. python json dumps与loads

    json.dumps() 是将一个Python数据结构转换为一个JSON编码的字符串 json.loads() 是将一个JSON编码的字符串转换为一个Python数据结构   一般要求当要字符串通过l ...