Bootstrap3.0学习教程–Bootstrap入门

文章目录

Bootstrap不是什么新鲜的玩意,可是学习一样新东西要花费不少的时间,一直没有下定决心去学习。通过这篇文章,也是想系统的学习一下Bootsrap,方便以后自己制作wordpress主题等。

本文主要是学习了Bootstrap3.0入门学习系列教程,这里仅仅记录心得。

Bootstrap介绍

Bootstrap是当下最流行的前端开发框架,可大大简化网站开发过程,从而深受广大开发者的喜欢。
官网地址:http://www.bootcss.com/
中文文档:http://v3.bootcss.com/bootstrap3
网站实例:http://expo.bootcss.com/

下载BootStrap

打开解压包之后可以发现包含三个文件夹 css、fonts、js,可以来查看三个文件夹中的文件

bootstrap1

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

注意:所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小(里面取出了注释的文字和空白)。

bower.json中列出了Bootstrap所支持的jQuery版本,依赖的jQuery库的版本>=1.9.0

可以通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js,进行下载。

基本使用BootStrap

我们创建了一个最简单的基本模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

1、HTML 5 文档类型(Doctype)

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。 因此,请在使用 Bootstrap 项目的开头包含下面的代码段。

1
2
3
4
<!DOCTYPE html>
<html>
....
</html>

如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证。

2、移动设备优先

Bootstrap3 的设计目标是移动设备优先,然后才是桌面设备。

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

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

width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

3、引入相关文件

1、将Bootstrap的样式文件引用当网页中

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

2.引用jquery库文件及bootstrap插件所用的js文件

1
2
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

4、IE9以下浏览器支持

我们使用的html5的一些新的标签,那么在IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下

1
2
3
4
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。

就这样我们最简单的Hello World!页面呈现在了大家面前。

bootstrap2

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/2578.html

下一篇文章:

上一篇文章:

4人参与了讨论

  1. xilouqingzhu 说:

    我擦,,不太会用,貌似今天免费的azure 不能用了 :sad:

  2. Eric_plus 说:

    Bootstrap 4.0接近发布了吗?

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

1 + 4 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部