26-[Boostrap]-介绍与起步

1、Bootstrap的介绍

凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后我们才开始干活！

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。

它用于开发响应式布局、移动设备优先的 WEB 项目

插件 == js  在js 的基础上写了一些功能   一个插件就是一个功能/方法

组件 = js + css + html  组件包含着插件

官网： http://www.bootcss.com/

下载： v3.3.7

css / fonts / js 引入项目中

https://v3.bootcss.com/

起步 / 全局CSS样式 / 组件 / JavaScript插件

2、响应(response)式页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>response</title>

    <!-- 自适应 手机屏幕 pc  都适应  使用媒体查询 @media 必须做以下操作-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style type="text/css">

        *{padding: 0;margin: 0;}

         /*  x < 500 */

        @media screen and (max-width: 500px) {

            .box{width: 200px;height: 300px;background-color: yellow;}

        }

        /*  800 > x >= 500 */

        @media screen and (min-width: 500px) and (max-width: 800px) {

            .box{width: 200px;height: 300px;background-color: red;}

        }

        /*  x >= 800 */

        @media screen and (min-width: 800px) {

            .box{width: 200px;height: 300px;background-color: blue;}

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

3、起步

https://v3.bootcss.com/getting-started/

　　（1）使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中

　　（2）点到起步中的基本模板

　　将看到的整段代码复制粘贴到建好的index.html文件中

基本模板(index)：

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <!-- 以最高的ie 浏览器 渲染  -->

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

        <!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 -->

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

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

        <title>Bootstrap Template</title>

        <!-- Bootstrap 必须引入bootstrap -->

        <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

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

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

        <!--兼容IE9以下的版本-->

        <!--[if lt IE 9]>

            <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

            <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>

    <body>

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

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

        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

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

        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

</html>

4、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">

  ...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

  ...

</div>

5、栅格系统

栅格系统的鼻祖是 https://960.gs/.

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

下面就介绍一下 Bootstrap 栅格系统的工作原理：

栅格参数

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <!-- 以最高的ie 浏览器 渲染  -->

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

    <!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 -->

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

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

    <title>gridsystem</title>

    <!-- Bootstrap 必须引入bootstrap -->

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

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

    <style type="text/css">

        /*不要随意修改bootstrap 提供的系统类*/

        [class^='col']{

            border: 1px solid gray;

        }

    </style>

</head>

<body>

    <!--.container  固定宽度容器    container-fluid  类用于 100% 宽度，占据全部视口（viewport）的容器  -->

    <div class="container">

    <!--<div class="container-fluid">-->

        <h1>栅格系统</h1>

        <!--用了bootstrap 会根据 屏幕大小自适应 pc 移动端  一般结合bootstrap 和媒体查询 会达到效果-->

        <!-- 一行12列 -->

        <div class="row">

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</div>

        </div>

    </div>

</body>

<!--

    总结：

        https://v3.bootcss.com/css/    栅格系统

        一行有12列

-->

</html>

26-[Boostrap]-介绍与起步的更多相关文章

linux任务计划cron、chkconfig工具、systemd管理服务、unit和target介绍
第8周第1次课(5月14日) 课程内容: 10.23 linux任务计划cron10.24 chkconfig工具10.25 systemd管理服务10.26 unit介绍10.27 target介绍 ...
Jetty官方文档翻译
最近在学习Jetty,没有找到合适的资料,所有只能看官方文档了,但是只有英文的,想着自己翻译着学也是学还不如把学习的过程放到网上,也可以给需要的人看,英文水平毕竟有限,也是用有道翻译着来的,不过也加了 ...
java自定义注解实现前后台参数校验
2016.07.26 qq:992591601,欢迎交流首先介绍些基本概念: Annotations(also known as metadata)provide a formalized way ...
图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE 谷歌火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
如何阅读《ECMAScript 2015 Language Specification》
你不需要把<ECMAScript 2015 Language Specification>通读一遍,因为没那个必要. 阮一峰建议: 对于一般用户来说,除了第4章,其他章节都涉及某一方面 ...
python核心编程学习记录之基础知识
虽然对python的基础知识有所了解,但是为了更深入的学习,要对python的各种经典书籍进行学习第一章介绍python的优缺点,略过第二章介绍python起步,第三章介绍python基础,仅记录 ...
Android 面试题总结
Android 面试题总结(不断更新) 1.INETNT几种有关Activit的启动方式FLAG_ACTIVITY_BROUGHT_TO_FRONT 将ACTIVITY带到最前面FLAG_ACTIVI ...
19、android面试题整理（自己给自己充充电吧）
(转载,出处丢失,请原作者原谅,如有意见,私信我我会尽快删除本文) JAVA 1.GC是什么? 为什么要有GC?GC是垃圾收集的意思(Gabage Collection),内存处理是编程人员容易出现问 ...
[大牛翻译系列]Hadoop（19）MapReduce 文件处理：基于压缩的高效存储（二）
5.2 基于压缩的高效存储(续) (仅包括技术27) 技术27 在MapReduce,Hive和Pig中使用可分块的LZOP 如果一个文本文件即使经过压缩后仍然比HDFS的块的大小要大,就需要考虑选择 ...

随机推荐

【MySQL】无法启动mysql服务(位于本地计算机上)错误1067,进程意外中止
好久没看MySQL了,今天启动起来找找感觉,尴尬了...发现服务启动不了.系统提示:无法启动mysql服务(位于本地计算机上)错误1067,进程意外中止. 解决过程: 1.在网上百度好久,看到一条解决 ...
Win10自动重启原因怎么查Windows10无故自动重启
电脑偶尔自动重启,可能很少用户会在意,若电脑经常无故重启,那么应该怎么办,怎么查找电脑无故自动重启原因呢?下面就以Windows10系统自动重启为例,来查查WIN10无故重启是什么原因导致.百度经验: ...
关于sys.dm_exec_requests
我知道SQL Server有很多视图和函数让我来了解SQL Server的运行状态.我还想知道SQL Server上关于来自用户或者应用的活动请求信息.怎么查询这些信息呢? SQL Server的动态 ...
iOS开发中常用的数学函数
iOS开发中常用的数学函数 /*---- 常用数学公式 ----*/ //指数运算 3^2 3^3 NSLog(,)); //result 9 NSLog(,)); //result 27 //开平方 ...
ARC下的block导致的循环引用问题解析
ARC下的block导致的循环引用问题解析更详细细节请参考 http://blog.sina.com.cn/s/blog_8c87ba3b0101m599.html ARC下,copy到堆上的blo ...
iOS设计模式 - 享元
iOS设计模式 - 享元原理图说明享元模式使用共享物件,用来尽可能减少内存使用量以及分享资讯给尽可能多的相似物件:它适合用于只是因重复而导致使用无法令人接受的大量内存的大量物件.通常物件中的部分 ...
1066. [SCOI2007]蜥蜴【最大流】
Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到 ...
更改backend
keras默认的backend是tensorflow,更改成theano方法如下: vim ~/.keras/keras.json { "image_dim_ordering":& ...
插件式程序开发及其应用（C#）
1. 定义所谓“插件模型”,指应用程序由一些动态的独立模块构成,每个模块均具有一个或多个服务,并满足一定的插件协议,能够借助主程序实现主程序-插件:插件-插件之间的通讯. 应用该模型的系统,具有以 ...
java的静态方法多态和匿名对象
静态方法: 看如下代码父类: public class FU { public static void show(){ System.out.println("this is fu!&qu ...