zoukankan      html  css  js  c++  java
  • 第二章 初步使用Bootstrap

     一、Bootstrap环境安装

    第一步:下载Bootstrap 

    您可以从https://v3.bootcss.com/上下载 Bootstrap CSS、JavaScript 和字体的文件。

    生产环境的Bootstrap是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。简单讲就是所谓的线上,就是正式给用户使用的环境。

    Bootstrap源码适用于开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。简单讲就是项目尚且处于编码阶段,一般这时候会把代码放在开发环境中,不会放在生产环境中。

    也可以从http://getbootstrap.com/上下载 Bootstrap CSS、JavaScript 和字体的文件。

    Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

    Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

    第二步:下载好的文件解压后结构如下:

    预编译的 Bootstrap

    当您下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:

     如上图所示,可以看到已编译的 CSS 和 JS(bootstrap.*),以及已编译压缩的 CSS 和 JS(bootstrap.min.*)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

    Bootstrap 源代码

    如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:

     ess/js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。

    dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。

    docs-assets/examples/ 和所有的 *.html 文件是 Bootstrap 文档。

    第三步:使用Bootstrap实现响应式开发

    1、什么是响应式?

      利用媒体查询,让同一个网站兼容不同的终端(PC端,移动端)呈现不同的页面布局。

    2,为什么要写自适应的页面(响应式页面)

      众所周知,电脑、平板、手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m.baidu.com,这样做简直就是费力不讨好的活,所以聪明的程序员开发了一种自适应写法,即一次开发,处处显示!这到底是一个什么样的神器东西呢,接下来就揭晓它的神秘面纱。

    4、通过一个使用了Bootstrap的案例了解使用Bootstrap实现响应式开发的文件结构

    第四步:在HTML文件中加入<metaname="viewport"content="width=device-width, initial-scale=1.0">

    viewport:设置移动端设备优先,可以根据移动端设备视口大小自适应缩放网页比例。

    device-width:device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)

    initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例

    第五步:引入<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">

    引入Bootstrap的css样式,可以引入下载到本地的Bootstrap中的css样式(也可以使用bootcdn提供的免费cdn加速服务)。

    第六步:引入JQuert类库文件<scriptsrc="https://code.jquery.com/jquery.js"></script>

    引入JQuery类库文件(也可以使用bootcdn提供的免费cdn加速服务)。

    第七步:引入Bootstrap中的js文件<scriptsrc="js/bootstrap.min.js"></script>

    引入bootstrap中的js文件(也可以使用bootcdn提供的免费cdn加速服务)。

  • 相关阅读:
    关闭编辑easyui datagrid table
    sql 保留两位小数+四舍五入
    easyui DataGrid 工具类之 util js
    easyui DataGrid 工具类之 后台生成列
    easyui DataGrid 工具类之 WorkbookUtil class
    easyui DataGrid 工具类之 TableUtil class
    easyui DataGrid 工具类之 Utils class
    easyui DataGrid 工具类之 列属性class
    oracle 卸载
    “云时代架构”经典文章阅读感想七
  • 原文地址:https://www.cnblogs.com/chengyp/p/14442697.html
Copyright © 2011-2022 走看看