1.Bootstrap基础知识

最新推荐文章于 2020-11-14 19:51:56 发布

小糊涂蛋装大神

最新推荐文章于 2020-11-14 19:51:56 发布

阅读量411

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/gxy1317/article/details/52215760

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BootStrap的中文官方网站为http://www.bootcss.com/
更详细的教程，还是访问中文官方网站

BootStrap是什么？

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何缩放。
也可以加上user-scalable=no可以禁用缩放功能。
Bootstrap不支持IE古老的兼容模式。为了让IE浏览器运行最新的渲染默认，建议加入如下代码

为什么使用Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

Bootstrap包的内容（预编译版）

bootstrap/

├── css/

│ ├──bootstrap.css

│ ├──bootstrap.css.map

│ ├──bootstrap.min.css

│ ├──bootstrap-theme.css

│ ├──bootstrap-theme.css.map

│ └──bootstrap-theme.min.css

├── js/

│ ├──bootstrap.js

│ └──bootstrap.min.js

└── fonts/

├──glyphicons-halflings-regular.eot

├──glyphicons-halflings-regular.svg

├──glyphicons-halflings-regular.ttf

├──glyphicons-halflings-regular.woff

└──glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web项目中。提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

文件详细说明：

1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

2.CSS：Bootstrap 自带以下特性：全局的CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

3.组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4.JavaScript 插件：Bootstrap 包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

HTML5文档类型(DOCTYPE)

Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，需要使用HTML5文档类型.如果不使用HTML5文档类型，可能会出现浏览器显示不一致情况。

<html lang=”zh-CN”>
 ....
</html></span>

为了让Bootstrap开发的网站对移动设备友好，确保适当绘制和触屏缩放，需要在网上的head之中添加viewport meta标签

Width属性控制设备的宽度。设置为device-width可以确保它能呈现在不同设备上。

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

Width属性控制设备的宽度。设置为device-width可以确保它能呈现在不同设备上。
initial-scale=1确保网页加载时，以1:1的比例呈现，不会有任何缩放。
也可以加上user-scalable=no可以禁用缩放功能。

官方提供的最简单 Bootstrap 页面

<!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">
    <!-- </span><span style="color:#ff0000;">上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！</span><span style="color:#333333;"> -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html></span>

总结：
1.Bootstrap3是以移动开发优先
2.HTML页面文档类型必须为HTML5