框架简介

Less

    Less是一种CSS预处理技术,它是一种动态样式语言。它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。它可以在多种语言环境中使用,包括浏览器、桌面客户端、服务端。详情访问:http://www.lesscss.net

下载

  Bootstrap框架的文件和源码可以在网站(http://www.bootcss.com/)下载

框架简介_第1张图片

框架简介_第2张图片

框架简介_第3张图片

    从该链接下载的内容是编译后可以直接使用的文件。默认情况下,下载后的文件分为两种:一种是未经压缩的文件bootstrap.css,一种是经过压缩处理的文件bootstrap.min.css。一般网站正式运行的时候,使用压缩过的min文件,以节约网站传输流量。而我们开发调试的时候往往使用原始的、未经压缩的文件,以便进行debug跟踪。

框架简介_第4张图片框架简介_第5张图片

    编译版解压后,可以看到如下结构的文件夹和文件。这些文件按照类别放到了不同的文件夹内,并提供了未压缩与压缩两种版本。

框架简介_第6张图片

    fonts目录下的文件用于icon图标展示,我们称这种方式为@font-face版本的icon实现,该字体来自glyphicons.com网站。所谓@font-face,其实是通过CSS里的@font-face语法,将安全的Web字体(Web Font)即时下载到客户端,从而进行引用显示。通过这种技术显示图标的好处是,图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式即可。

    bootstrap.min.css和bootstrap.min.js是压缩后的文件,用于生产环境使用,而普通的bootstrap.css和bootstrap.js是用于开发环境进行调试、分析的。

    可以根据自己的程序结构,对上述的css、js文件夹名称进行随意重命名,但是不能对fonts文件夹进行重命名,因为css文件里的源码使用了相对路径(../fonts/),如果重命名了,那就取不到这些字体文件了。

注意:

    Bootstrap所有的JavaScript插件都依赖于jQuery库,要确保在使用这些功能的时候引用相应的jQuery文件。

标准模板

    如下代码是使用Bootstrap框架的最基本HTML代码,可以在此基础上进行自己的扩展,只需要确保文件引用顺序一致即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap基础模板</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 -->
    <!-- 注意:Respond.js不支持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.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- 如果要使用Bootstrap的JS插件,则必须引入jQuery -->
    <script src="https:// code.jquery.com/jquery.js"></script>
    <!-- Bootstrap的JS插件 -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

    上述代码中:

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

    这个表示Bootstrap从3.0版开始全面支持移动平台,并将贯彻移动先行的宗旨。上述代码的意思是,默认情况下,UI布局的宽度和移动设备的宽度一致,缩放大小为原始大小。对于移动代码的处理,还有另外一种形式,代码如下:

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

    上述代码表示:强制让文档的宽度与设备的宽度保持1:1,文档最大的宽度比例是1,且不允许用户单击屏幕放大浏览。一定要注意的是,content里的多个属性的设置一定要用分号和空格来隔开,如果不规范将不起作用。

 

你可能感兴趣的:(框架简介)