移动Web学习笔记（第1天）-bootstrap框架的使用

移动web前言

移动web ：移动端手机浏览器或者微信里面浏览的网页
移动APP ：手机上需要下载安装的应用程序

1. 移动web介绍

1.1 3 天响应式开发一套代码运行多个终端优点:开发快维护快适配好缺点加载速度慢

1.2 3 天纯原生移动web开发一套代码运行一个端优点: 加载速度快缺点开发慢维护慢适配差

1.3 应用场景 :

响应式开发用在一些新建的网站(PC和移动同时出来) 对加载速度要求不是很高
纯原生移动web开发一般会用在一些已经有PC端上线的网站再次开发移动端移动端需要加载速度很快的网站

2. 响应式开发原理

2.1 CSS3的媒体查询：通过查询屏幕的的宽度来指定某个宽度区间的网页布局

2.2 常见设备的屏幕宽度

超小屏幕（移动设备） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上

2.3 媒体查询的语法

    @media screen and (条件){

        //满足条件执行CSS代码

    }

    and的前后必须有空格  条件通常只有两个 min-width max-width

    @media (条件){

        //满足条件执行CSS代码

    }

    可以简写省略 screen and

2.4 媒体查询的写法的顺序和特性

2.4.1 条件判断有两种 min-width 屏幕宽度大于等于某个值生效 max-width 屏幕宽度小于等于某个值的时候生效

2.4.2 条件判断的参考值通常有以下4个

  w > 1200  大屏幕 大屏PC设备

  992 < w < 1200  中屏幕 老式电脑

  768 < w< 992  小屏幕 平板设备

  w < 768 超小屏幕 手机

2.4.3 媒体查询判断的顺序说明

1.如果使用min-width条件判断的时候条件判断大小要从小到大写

  @media screen and (min-width: 768px){

      body{

          background-color: green;

      }

  }

  /*w:992~1200 blue  min-width: 992px:当屏幕的宽度大于等于992的时候*/

  @media screen and (min-width: 992px){

      body{

          background-color: blue;

      }

  }

  /*w>1200 pink*/

 @media screen and (min-width: 1200px){

      body{

          background-color: pink;

      }

  }

2.如果使用max-width条件判断到时候条件判断大小要从大到小写

  @media screen and (max-width: 1200px) {

      body {

          background-color: green;

      }

  }

  /*max-width: 992px:宽度在992以下*/

  @media screen and (max-width: 992px) {

      body {

          background-color: blue;

      }

  }

  /*max-width: 768px:宽度在768以下*/

  @media screen and (max-width: 768px) {

      body {

          background-color: pink;

      }

  }

2.3.4 写法的特性有两个

向上兼容就是只写了小的判断大的判断没有写但是在大屏幕下也会生效
向下覆盖同时写了小的判断和大的判断满足大的条件会生效大的条件的样式大的条件写在后面会把小的条件的样式覆盖

2.3.5 使用媒体查询实现网页布局

在大屏幕下显示4列中屏幕显示3列小屏幕显示2列超小屏幕显示1列

  /*w 768~992  每一行放置两个子元素  50%*/

  @media screen and (min-width: 768px){

      .box > div{

          width: 50%;

      }

  }

  /* w 992~1200 每一行放置三个子元素  33.33%*/

  @media screen and (min-width: 992px){

      .box > div{

          width: 33.33%;

      }

  }

  /*w >1200 每一行放置四个子元素 25%*/

  @media screen and (min-width: 1200px){

      .box > div{

          width: 25%;

      }

  }

原理就是通过媒体查询判断条件改变盒子的宽度

3. 响应式开发框架 Bootstrap介绍

特点：灵活简介，代码优雅，美观大方
好处：Bootstrap 让我们的Web开发更简单，更快捷
版本：目前市面上使用最多的是3.x.x版本除此之外还有2.3.2对IE8支持还有4.0.0的alpha内部测试版
相关链接: 中文官网使用Bootstrap构建的网站

4. 库和框架的区别

jquery : 库便捷的DOM (你想实现什么功能就调用什么方法)(主导者是你你调用库)
Bootstrap : 框架界面工具集框架是他来控制你 (框架制定好了一系列规则你按照规则填坑)(主导者是框架是框架调用你)(会用就行)

5. Bootstrap的基本使用

5.1 下载: 去Bootstrap官网中文官网的起步里面下载生产环境的Bootstrap 解压之后把整个文件夹放到项目里面来

5.2 引入Bootstrap

先引入Bootstrap的CSS(如果想要主题可以在引入带主题的CSS)
再引入自己的CSS
先引入jquery(因为Bootstrap依赖jquery)
再引入Bootstrap的JS
再引入自己的JS

<!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="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- html5 shiv是为了让低版本IE支持html5新标签  -->

    <!-- respond.js是为了让低版本IE支持CSS3媒体查询 -->

    <!-- 但是注意respond.js需要在服务器下运行 就是localhost 不能再file下运行不然无法工作 -->

    <!-- 条件注释 IE版本小于IE9 条件成立就执行下面的代码  如果条件不成立就是注释不执行 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <!-- bootstrap的JS插件依赖jquery 所以要先引入jquery -->

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

    <!-- 在引入Bootstrap的JS文件 -->

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

  </body>

</html>

5.3 引包的顺序

先引入第三方的框架
再引入自己的文件
CSS放到head里面引入(有些特殊的JS文件对页面渲染有作用的要放到head中)
js放到body结束标签是上面引入

5.4 视口

视口: 浏览器的可视窗口在PC端是会受到浏览器窗口变化而变化
视口在PC端是可视窗口(会变的) 在移动端有一个固定的值通常是默认980
但是默认移动端的时候980会造成网页的缩放或者出滚动条
解决移动端默认视口会造成网页缩放和滚动条设置meta标签设置默认是视口的宽度等于设备的宽度
视口的其他属性初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放 minimum-scale=1.0
meta:vp+tab 凡是写移动端页面一来就是加上视口

5.5 浏览器兼容模式

http-equiv="X-UA-Compatible" 表示设置IE浏览器的兼容模式
content="IE=edge" 表示让IE浏览器用最新的渲染引擎渲染页面

6. Bootstrap文档

6.1 基础CSS样式

概要 (常用)
- 布局容器
栅格系统 (常用)
- xs : 超小屏幕手机 (<768px)
- sm : 小屏幕平板 (≥768px)
- md : 中等屏幕桌面显示器 (≥992px)
- lg : 大屏幕大桌面显示器 (≥1200px)
预置排版样式
- 统一预制标签样式
- 文本对齐 (常用)
- 改变大小写
代码样式
- 页面输出代码
表格样式
- 各种表格样式
表单样式
- 各种表单组合的样式
按钮样式
- 各种按钮颜色和按钮大小等样式 (常用)
图片样式
- 图片圆角的样式
辅助工具类
- 内容块居中 (常用)
- 快速浮动和清除浮动 (常用)
- 显示隐藏 (常用)
响应式工具类 (常用)
- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示
基础CSS这块只是将我们常用想一些元素的样式做了美化,如果需要使用直接拿过来用就行了

6.2 预制界面组件

导航 (常用)
导航条 (常用)
面包屑导航
下拉菜单 (常用)
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组 (常用)
面板 (常用)
媒体对象 (常用)
进度条
Glyphicons字体图标 (常用)
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌
将我们日常使用的一些功能块例如下拉菜单,提前写好,我们使用时直接找到对应的demo然后拿回来做相应调整就行了

6.3 Javascript 插件

模态对话框 (常用)
下拉菜单 (常用)
滚动监听 (常用)
标签页 (常用)
工具提示
弹出框
警告框
按钮
折叠面板 (常用)
轮播图 (常用)
吸顶效果 (常用)
- data-spy="affix"
- data-offset-top="什么位置出现"
- data-offset-bottom="什么位置消失"

6.4 Javascript插件依赖情况

jQuery

Bootstrap 框架中的所有JS组件都依赖jquery实现

7. 微金所项目搭建

7.1 搭建Bootstrap页面骨架及项目目录结构

├─ /weijinsuo/ ··················· 项目所在目录

└─┬─ /css/ ······················· 我们自己的CSS文件

  ├─ /font/ ······················ 使用到的字体文件

  ├─ /img/ ······················· 使用到的图片文件

  ├─ /js/ ························ 自己写的JS脚步

  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】

  ├─ /favicon.ico ················ 站点图标

  └─ /index.html ················· 入口文件

7.1.1 约定编码规范

1. HTML约定

在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖
在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系

比如Bootstrap.js 依赖jquery,那就应该先引入jquery.js 然后引用Bootstrap.js

2. CSS约定

除了公共级别的样式,其余样式全部由模块前缀
尽量使用直接子代选择器少用间接子代选择器避免误杀

7.2 创建主页引入相应的文件

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>页面标题</title>

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

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

</head>

<body>

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

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

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

</body>

</html>

7.3 在我们默认样式表中讲默认字体设置为

body{

  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;

}

7.4 完成页面空结构

先划分好页面的大容器,然后具体看每一个容器的单独情况

  <!--  头部区域 -->

  <header></header>

  <!-- /头部区域 -->

  <!--  广告轮播 -->

  <section></section>

  <!-- /广告轮播 -->

  <!--  立即预约 -->

  <section></section>

  <!-- /立即预约 -->

  <!--  产品介绍 -->

  <section></section>

  <!-- /产品介绍 -->

  <!--  新闻资讯 -->

  <section></section>

  <!-- /新闻资讯 -->

  <!--  合作伙伴 -->

  <section></section>

  <!-- /合作伙伴 -->

  <!-- 脚注区域 -->

  <footer></footer>

  <!-- /脚注区域 -->

7.5 构建顶部通栏

    <div class="topbar hidden-xs hidden-sm">

        <div class="container">

            <div class="row">

                <div class="col-md-2 text-center">

                    <i class="icon-mobilephone"></i> 手机微金所 <i class="glyphicon glyphicon-chevron-down"></i>

                </div>

                <div class="col-md-5 text-center"> <i class="icon-telephone"></i> 4006-89-4006（服务时间：9:00-21:00）

                </div>

                <div class="col-md-2 text-center">常见问题 财富登录</div>

                <div class="col-md-3 text-center">

                    <a href="" class="btn btn-danger">免费注册</a>

                    <a href="" class="btn btn-link">登录</a>

                </div>

            </div>

        </div>

    </div>

7.5.1 container 类 (版心)

用于定义一个固定宽度且居中的版心

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>Document</title>

      <style>

      html,

      body {

          margin: 0;

          padding: 0;

      }

      .container {

          height: 200px;

          width: 100%;

          background-color: #f40;

          margin: 0 auto;

      }

      @media (min-width:768px) {

          .container {

              width: 750px;

          }

      }

      @media (min-width:992px) {

          .container {

              width: 970px;

          }

      }

      @media (min-width:1200px) {

          .container {

              width: 1170px;

          }

      }

      </style>

  </head>

  <body>

      <div class="container">

      </div>

      </script>

  </body>

  </html>

7.5.2 栅格系统

<div class="row">

  <div class="col-md-2">

  </div>

  <div class="col-md-5">

  </div>

  <div class="col-md-2">

  </div>

  <div class="col-md-3">

  </div>

</div>

1. row类

<div class="row">

</div>

2. col-**-* 类

<div class="col-md-3">

</div>

col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
xs : 超小屏幕手机 (<768px)
sm : 小屏幕平板 (≥768px)
md : 中等屏幕桌面显示器 (≥992px)
lg : 大屏幕大桌面显示器 (≥1200px)

此处顶部通栏已经被划分为四列

text-center的作用就是让内部内容居中显示

7.5.3 字体图标

1. 字体图标生成网站

@font-face {

    font-family: 'itcast';

    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), url('../fonts/MiFie-Web-Font.svg') format('svg'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff');

}

[class^="icon-"],

[class*=" icon-"] {

    /*注意上面选择器中间的空格

我们使用的名为itcast的字体就是最上面的@font-face的方式声明*/

    /*当字体名字之间有空格的都要用引号引起来 ,如果没有空格的话可以不用引号*/

    font-family: itcast;

}

2. 字体格式

eot : embedded-opentype
svg : svg
ttf : truetype
woff : woff

3. 字体图标生成步骤

进入 https://icomoon.io/ 网站
点击右上角 icomoonApp
点击左上角 import icons
选中所有导入的图标
点击右下角 generate font
点击左上角 preferences 设置字体名称和类名前缀
点击download
解压生成好的压缩包里面有demo.html
打开demo.html能够查看图标对应类名
使用的时候把 fonts文件夹放到项目并且引入style.css（这里面就定义了那些图标的类名）

3. 字体图标的使用步骤

得下载或者生成或者去借(去别的网站拿)一个字体文件
使用@font-face定义一个字体名称

1. 先指定字体的名称font-family:"字体名称";

2. 引入这个字体名称对应的字体文件如果不考虑兼容只引入ttf src:url(路径.ttf) format("truetype")
定义一个图标的类名来使用图标

1. 先使用图标对应的字体名称font-family:"字体名称";

2. 指定图标的编码放到类名的伪元素的content里面 content: "\e945";

3. 清除默认的斜体
在页面使用定义好的图标的类名就可以了

总结

移动web ：移动端浏览器显示的网页
移动web的两种开发方式
1. 响应式开发方式：一套代码运行多个终端开发快维护快加载慢适配好用在一些新建的网站对速度要求不高的
2. 纯原生移动web开发：分别写两套代码开发慢维护慢加载快适配差用在一些已经上线的了PC再次开发移动web 对加载速度要求高的网页
响应式开发原理
1. CSS3媒体查询实现
2. 媒体查询语法
  
  @meida screen and (){
  
  sreen and 可以省略如果不省略 and前后要有空格
}

3. 媒体查询的条件判断和顺序说明

1. 媒体查询有两个条件判断 min-width: 屏幕宽度大于等于某个值成立条件判断要从小到大写

2. max-width：屏幕宽度小于等于某个值成立条件判断要从大到小写

4. 媒体查询的特性

1. 向上兼容：没有写大的判断也能生效小屏幕的判断

2. 向下覆盖：同时写了小和大屏幕的判断大屏幕在后面会覆盖小屏幕的样式
响应式开发框架Bootstrap：灵活简介代码优雅美观大方
使用Bootstrap框架
1. 下载
2. 引入bootstrap
  1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js
布局容器 .container : 固定宽度且居中 .container-fluid 宽度100%
栅格系统
1. 栅格系统的4个档次
  
  col-xs w<768
  
  col-sm 768<w<992
  
  col-md 992<w<1200
  
  col-lg w>1200
2. 栅格系统默认一行分为12列
  
  分成4列 col-xx-3
  
  分理3列 col-xx-4
  
  分理2列 col-xx-6
  
  分理1列 col-xx-12
搭建微金所项目 fonts css/font.css img lib
创建Index.html 引包先引入第三方再引入自己的
创建页面的骨架
搭建顶部通栏 .container>.row>col-md-2col-md-5col-md-2col-md-3
字体图标
1. bootstrap官方图标组件》字体图标拷贝图标类名即可
2. 自己生成字体图标 icommoon.io网站生成
3. 引入生成好的字体图标样式文件同时字体文件要放在旁边
bootstrap的按钮全局CSS 》按钮

移动Web学习笔记（第1天）-bootstrap框架的使用的更多相关文章

.NET MVC 学习笔记（二）— Bootstrap框架
二..NET MVC 学习笔记(一)—— Bootstrap框架在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...
[原创]java WEB学习笔记95：Hibernate 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
[原创]java WEB学习笔记75：Struts2 学习之路-- 总结和目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
[原创]java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
java web 学习笔记编码问题总结
java web 学习笔记编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...
Java Web 学习笔记 1
Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...
[原创]java WEB学习笔记11：HttpServlet（HttpServletRequest HttpServletRsponse）以及关于 Servlet 小结
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
Java Web学习笔记之---EL和JSTL
Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...
Java Web学习笔记之---JSP
Java Web学习笔记之---JSP (一)JSP常用语法 (1)HTML注释  在客户端显示一个注释. (2)隐藏注释 <%--所要注释的内容--% ...
JAVA Web学习笔记
JAVA Web学习笔记 1.JSP (java服务器页面) 锁定本词条由“科普中国”百科科学词条编写与应用工作项目审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...

随机推荐

Selenium chrome配置不加载图片Python版
环境: windows 7 + Python 3.5.2 + Selenium 3.4.2 + Chrome Driver 2.29 + Chrome 58.0.3029.110 (64-bit) f ...
accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
protobuf转json
方法介绍 protobuf的介绍在这里就不详细介绍了,主要是俺也是刚接触,感兴趣的同学可以去搜索相关博客或者直接去看源码以及google的官方文档(官方文档表示很吃力)或者去这个网站:https:// ...
游戏UI框架设计(7): 资源国际化技术
游戏UI框架设计(7) --资源国际化技术说起"资源国际化"技术,个人认为可以追述到微软Window2000 PC操作系统的发布,在这之前windows98操作系统的开发都是先由 ...
把编译安装的httpd 实现服务脚本，通过service和chkconfig 进行管理
把编译安装的httpd 实现服务脚本,通过service和chkconfig 进行管理 1 编译安装httpd 把httpd编译安装在/app/httpd/目录下. 2 在/etc/rc.d/init ...
PhpStorm配置PHP解释器（wampServer版）
PHPStorm(以下简称为PS)和wampServer集成环境安装简单,不再赘述. 本人使用PhpStrom版本为2017.1.4版本. PS刚开始使用会使用自带服务器,但是有几率不能自动匹配到PH ...
Java基础语法<二> 字符串String
1. 代码点与代码单元 Java字符串由char序列组成.大多数的常用Unicode字符使用一个代码单元就可以表示,而辅助字符需要一对代码单元表示. length()方法将返回采用UTF-16编码表示 ...
App的前后台数据同步
前言在开发一个点餐软件时,app的订单数据是使用本地Sqlite数据库,在提交订单数据后,当订单数据在后台(Mysql数据库)发生变化时(如:已买单),本地数据如何改变呢? 思路前台在查询时,将后 ...
JavaService实现Windows服务
下载JavaService.exe文件下载地址:http://pan.baidu.com/s/1boWk1uJ(支持Windows 7 64位) 创建server文件目录在D盘新建一个文件夹如:D ...
关于MySQL的commit非规律性失败案例的深入分析
案例描述: 一个普通的事务提交,在应用里面会提示commit超时,失败. 一.理论知识 1.关于commit原理,事务提交过程 1.寻找修改的数据页: 1.如果该数据页在内存中,则直接是内存读: 2. ...

移动Web学习笔记（第1天）-bootstrap框架的使用

移动web前言

1. 移动web介绍

1.1 3 天 响应式开发 一套代码运行多个终端 优点:开发快 维护快 适配好 缺点加载速度慢

1.2 3 天 纯原生移动web开发 一套代码运行一个端 优点: 加载速度快 缺点开发慢 维护慢 适配差

1.3 应用场景 :

2. 响应式开发原理

2.1 CSS3的媒体查询： 通过查询屏幕的的宽度来指定某个宽度区间的网页布局

2.2 常见设备的屏幕宽度

2.3 媒体查询的语法

2.4 媒体查询的写法的顺序和特性

2.4.1 条件判断有两种 min-width 屏幕宽度大于等于某个值生效 max-width 屏幕宽度小于等于某个值的时候生效

2.4.2 条件判断的参考值通常有以下4个

2.4.3 媒体查询判断的顺序说明

2.3.4 写法的特性有两个

2.3.5 使用媒体查询实现网页布局

3. 响应式开发框架 Bootstrap介绍

4. 库和框架的区别

5. Bootstrap的基本使用

5.1 下载: 去Bootstrap官网中文官网 的起步里面下载生产环境的Bootstrap 解压之后把整个文件夹放到项目里面来

5.2 引入Bootstrap

5.3 引包的顺序

5.4 视口

5.5 浏览器兼容模式

6. Bootstrap文档

6.1 基础CSS样式

6.2 预制界面组件

6.3 Javascript 插件

6.4 Javascript插件依赖情况

7. 微金所项目搭建

7.1 搭建Bootstrap页面骨架及项目目录结构

7.1.1 约定编码规范

1. HTML约定

2. CSS约定

7.2 创建主页 引入相应的文件

7.3 在我们默认样式表中讲默认字体设置为

7.4 完成页面空结构

7.5 构建顶部通栏

7.5.1 container 类 (版心)

7.5.2 栅格系统

1. row类

2. col-**-* 类

7.5.3 字体图标

1. 字体图标生成网站

2. 字体格式

3. 字体图标生成步骤

3. 字体图标的使用步骤

总结

移动Web学习笔记（第1天）-bootstrap框架的使用的更多相关文章

随机推荐

热门专题

1.1 3 天响应式开发一套代码运行多个终端优点:开发快维护快适配好缺点加载速度慢

1.2 3 天纯原生移动web开发一套代码运行一个端优点: 加载速度快缺点开发慢维护慢适配差

2.1 CSS3的媒体查询：通过查询屏幕的的宽度来指定某个宽度区间的网页布局

5.1 下载: 去Bootstrap官网中文官网的起步里面下载生产环境的Bootstrap 解压之后把整个文件夹放到项目里面来

7.2 创建主页引入相应的文件