一、下载bootstarp（https://v3.bootcss.com/），解压并将文件放入自己项目里去使用即可

 二、安装bootstarp

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>三线码工</title>

  <!-- 引入Bootstrap核心样式文件（必须） -->

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

  <!-- 引入Bootstrap默认主题样式（可选） -->

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

  <!-- 你自己的样式或其他文件，自己的css文件最好放最后，可以覆盖框架-->

  <link rel="stylesheet" href="example.css">

</head>

<body>

  <!-- 你的HTML结构...... -->

  <!-- 以下代码，如果不使用JS插件则不需要 -->

  <!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->

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

  <!-- 引入所有的Bootstrap的JS插件 -->

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

  <!-- 你自己的脚本文件，自己的js文件一般放最后 -->

  <script src="example.js"></script>

</body>

</html>

三、bootstarp模板

<!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 101 Template</title>

    <!-- Bootstrap -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

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

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

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

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

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

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  </body>

</html>

以上是官方bootstarp提供的模板，以后安装可以参照此模板写项目。

bootstarp一些标签的解释

1. <meta charset="utf-8">

　　文档的编码格式 utf-8 ，国际通用，中文编码也可以 gbk 之类的

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

　　此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

　　<meta name="renderer" content="webkit">

　　将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：

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

  • 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
  • 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
  • 视口的宽度可以通过meta标签设置
  • 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  • width:视口的宽度
  • initial-scale：初始化缩放
  • user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  • minimun-scale:最小缩放initial-scale

四、bootstarp css文档

　　https://v3.bootcss.com/css/

1.栅格

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

案例，对一个div里面进行分割，不同屏幕时三个小div所占的位置各不相同（下面小屏幕指手机屏幕768px）

学习bootstarp第一天的更多相关文章

  1. RabbitMQ学习总结 第一篇：理论篇

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  2. 学习KnockOut第一篇之Hello World

    学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...

  3. ActionBarSherlock学习笔记 第一篇——部署

    ActionBarSherlock学习笔记 第一篇--部署          ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...

  4. Java学习记录第一章

    学习Java第一章的记录,这一章主要记录的是Java的最基础部分的了解知识,了解Java的特性和开发环境还有Java语言的优缺点. 计算机语言的发展大概过程:机器语言--->汇编语言---> ...

  5. oracle学习笔记第一天

    oracle学习笔记第一天 --oracle学习的第一天 --一.几个基础的关键字   1.select select (挑选) 挑选出显示的--列--(可以多列,用“,”隔开,*表示所有列),为一条 ...

  6. javascript的ES6学习总结(第一部分)

    ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...

  7. Web基础学习---HTML 第一天

    Web基础学习---HTML 第一天 1 HTML标签 2.CSS Web开发基础HTML好吧离开Python几天...如何学好前端?? 多去看别人的网站.多看.多写.多练,(知乎.36Kr.)多练就 ...

  8. QT学习之第一个程序

    QT学习之第一个程序 目录 手动创建主窗口 居中显示 添加窗口图标 显示提示文本 Message Box的应用 手动连接信号与槽 手动创建主窗口 窗口类型 QMainWindow: 可以包含菜单栏.工 ...

  9. 创芯Xilinx Microblaze 学习系列第一集

    创芯Xilinx Microblaze 学习系列第一集 Xilinx ISE Design Suite 13.2 The MicroBlaze™ embedded processor soft cor ...

随机推荐

  1. 007-函数-C语言笔记

    007-函数-C语言笔记 学习目标 1.[了解]函数的分类 2.[掌握]函数的声明定义和调用 3.[掌握]函数的形参和实参 4.[掌握]带返回值的函数 5.[掌握]全局变量和局部变量 6.[了解]注释 ...

  2. G - Greg and Array CodeForces - 296C 差分+线段树

    题目大意:输入n,m,k.n个数,m个区间更新标记为1~m.n次操作,每次操作有两个数x,y表示执行第x~y个区间更新. 题解:通过差分来表示某个区间更新操作执行的次数.然后用线段树来更新区间. #i ...

  3. openssl进行RSA加解密(C++)

    密钥对根据RSA的加密机制(自行查找RSA工作原理),通常可以私钥加密-公钥解密(多用于签名),公钥加密-私钥解密(多用于数据传输加密),私钥可以生成公钥. 密钥对生成生成私钥,长度为2048,默认格 ...

  4. PHP函数：php_sapi_name

    php_sapi_name()  - 返回 web 服务器和 PHP 之间的接口类型. SAPI(Server Application Programming Interface)服务器应用程序编程接 ...

  5. 极验反爬虫防护分析之slide验证方式下图片的处理及滑动轨迹的生成思路

    本文要分享的内容是去年为了抢鞋而分析 极验(GeeTest)反爬虫防护的笔记,由于篇幅较长(为了多混点CB)我会按照我的分析顺序,分成如下四个主题与大家分享: 极验反爬虫防护分析之交互流程分析 极验反 ...

  6. 详解 File类

    在讲解File类之前,本人先要讲解下 路径,因为我们对于文件的操作是离不开路径的: 目录 路径: File类 文件名称过滤器: 路径: 请观看本人博文 -- <详解 绝对路径与 相对路径> ...

  7. eclipse集成 json editor plugin插件

    打开eclipse 找到: help--->install new software ——>add name:jsoneditor location:https://marketplace ...

  8. C#集合类型——Array、ArrayList、List 之浅谈

    在学习或工作中,集合是经常用到的,可以换一句话说“无项目无集合”,“项目皆有集合”.它一般存储一系列数据或者将一系列数据进行相关操作.在这里先大略谈一些集合类型的相关知识用于回顾. 数组(Array) ...

  9. iview使用之怎样通过render函数在tabs组件中添加标签

    在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...

  10. 关于“xxx”object is not callable的异常

    参考博文:https://blog.csdn.net/yitiaodashu/article/details/79016671 所谓callable对象是指一个后边可以加()的对象,比如函数, 所以这 ...