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的块的大小要大,就需要考虑选择 ...

随机推荐

REST Framework 的用户认证组件
用户认证流程: 我们要知道这个流程是怎么走的? 认证之后做的什么? 怎么认证?这三个条件认证流程:就是使用BaseAuthentication这个模块来做认证,判断你登陆成功传递过来的随机字符串是否 ...
[翻译] TransitionKit
TransitionKit https://github.com/blakewatters/TransitionKit A simple, elegantly designed block based ...
Forefront TMG 之 ISP 冗余传输链路（ISP-R）
在 Forefront TMG 中,新增了ISP 冗余传输链路功能:在 TMG 中,你可以同时使用两条活动的外部链路,使用模式分为以下两种: 故障转移模式:在主要链路工作正常的情况下,所有的流量都通过 ...
SCCM2012安装、配置
1.sql server2012,排序规则选择:SQL_Latin1_General_CP1_CI_AS1.扩展AD架构2.打开ad用户和计算机,高级--system 容器授予 sccm服务器完全控 ...
UNIX高级环境编程（3）Files And Directories - stat函数，文件类型，和各种ID
在前面的两篇,我们了解了IO操作的一些基本操作函数,包括open.read和write. 在本篇我们来学习一下文件系统的其他特性和一个文件的属性,涉及的函数功能包括: 查看文件的所有属性: 改变文件所 ...
Python入门-模块4（序列化----json模块和pickle模块）
序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes.反之,把硬盘里面的数据读到内存里,叫反序列化.
oracle 28001错误密码过期失效
背景服务器演示地址,无法使用.排查原因,是数据库密码有问题,报28001错误问题确定是oracle密码机制,180失效了解决 1.进入sqlplus模式 sqlplus / as sysdba ...
Zabbix日常监控（win_agent方式）
参考博文:https://www.cnblogs.com/xqzt/p/5130469.html https://www.cnblogs.com/zoulongbin/p/6395047.html 本 ...
Hyper-v 中 CentOS 连接外网之有线网卡
一.打开虚拟机交换管理器,查看默认的虚拟交换机如果不是内部网络,则需要新建一个虚拟交换机,新的交换机应该使用内部网络: 二.配置虚拟机使用的交换机.如果 “默认开关” 不是内部网络,需要使用自己新创 ...
delete obj$
//////要用system,dba身份登入进去//////select * from obj$ oWHERE o.obj#=149554where o.name='MV_ZD_QLR' delete ...