一、概述

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. 2d图片依次排列在屏幕中间（SpriteRenderer）

    如图所示: C#代码: using System.Collections; using System.Collections.Generic; using UnityEngine; public cl ...

  2. 2019-07-30 ThinkPHP文件上传

    文件上传就是获取到待上传文件的临时路径,把它移动到服务器下的相应文件夹中. 文件上传,必须在表单中的form标签中写入:enctype="multipart/form-data" ...

  3. Devops K8s

    公司在组建Devops团队,base在上海 徐家汇.具体职位有Devops工程师和K8s工程师. 有意者请私信.

  4. 冬虫夏草winterwormsummerherb英语

    “中药之王”--冬虫夏草WinterwormSummerherb King of Chinese medicine --WinterwormSummerherb “冬天是虫,夏天是草,冬虫夏草是个宝. ...

  5. APS应用案例|纽威阀门实现高效排产

    企业背景: 苏州纽威阀门股份有限公司(下文简称:纽威阀门)成立于1997年,总部设在江苏苏州.自成立以来一直致力于工业阀门的研发与制造,以为客户提供全套工业阀门解决方案为目标.纽威阀门通过企业的努力发 ...

  6. Nginx配置多域名代理

    目的 当我们有多个站点需要对外网开放,每个站点的域名都不一样,然而我们只有一个外网ip.这种情况下,我们就可以使用一个Nginx来配置多域名代理.这种代理方式可以解决,在同一个端口上针对不同域名代理不 ...

  7. Oracle使用expdp/impdp迁移数据

    Oracle使用expdp/impdp迁移数据 1.#以下步骤在开发库执行(expdp导出) 一.创建逻辑目录,该命令不会在操作系统创建真正的目录,最好以system等管理员创建. sqlplus / ...

  8. LaTeX的安装并使其能够编译中文

    首先,感谢博客园团队帮我找回这篇被我误删除的博客.找回方法:发送邮件至"contact@cnblogs.com",然后就可以在工作人员的帮助下找回了.下面介绍LaTeX的安装并使其 ...

  9. docker命令小全 this is my note.

    服务器类型:linux =>centos 7.X以上版本 常用命令使用紫色加粗标明 1.安装yum-util(为配置docker安装时使用阿里镜像做准备):yum install -y yum- ...

  10. Flask基础之session验证与模板渲染语法(jinja2)

    目录 1.http传输请求头参数 2.Flask中request.data参数处理 3.Flask中request.json参数 4.Flask中的session管理 5.Flask中模板语法(if, ...