• 基于bootstrap的网页开发


    1-1 课程介绍

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

     

     

     

     

    1)      漂亮的设计

    2)      友好的学习曲线

    3)      卓越的兼容性

    4)      12列的响应式栅格结构

    5)      丰富的组件

    Bootstrap是一款简洁强大的前端开发框架,让web开发更迅速、简单。

    特点:简洁、扁平化的图标、优雅的排版、

     

    2-1 如何开始使用Bootstrap

     

    Bootstrap分为Bootstrap2 和 bootstrap3

    Bootstrap2 兼容很多浏览器、包括IE老版本,由于背着这样的包袱,功能不够激进,代码不够简洁。

    自Bootstrap 2.3.2 版本之后,官方关闭了对此系列的更新。

     

    Bootstrap3 则放弃了IE7和firefox 3.x 版本的支持。虽然对IE8支持,但是IE8对CSS3的支持有限,所以有些效果的呈现大大折扣。

     

    我们这里主要研究Bootstrap 3.2.0 版本,官方页面很简洁,

    如果不想下载可以直接引用Bootstrap官网的CDN(在线代码库)

    下载的文件目录

    (注意boostrap所有的样式和插件都依赖Jquery,所以必须先引入)

     

     

    以上是boostrap官方提供的模板,bootstrap 不提供IE的兼容模式,

     

     

    平时用的移动浏览器是把页面放在一个虚拟的视口,也就是viewport 中,虚拟视口比屏幕宽,不会造成页面的挤压,但是对破坏一些针对移动浏览优化的布局。用户可以通过缩放和平移看页面各部分信息。

    Viewport可以让网页开发者控制网页的大小和缩放,

    Width=device-width,这个就是viewport 的宽度等于设备的宽度。

    Initial-scale=1 设置初始载入时的缩放比例,1表示不缩放。

     

    上面的意思宽度等于设备的分辨率,不缩放,这样页面显示更加细腻。

     

    这段注释解释:

    第一个引入的js 让IE8支持html5,第二个引入是让IE8支持media query

    html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

     

    "指定用户是否可以缩放视区,即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放,值为no时不允许缩放。

     

     

     

  • 相关阅读:
    《构建之法》阅读笔记4
    《构建之法》阅读笔记3
    《构建之法》阅读笔记2
    《构建之法》阅读笔记1
    Android可折叠式菜单栏
    Material卡片式布局+下拉刷新+完整代码
    android悬浮按钮的使用
    androidStdio下载与安装以及安装过程问题解释
    html给图片划分区域添加链接
    UI进阶2-滑动菜单
  • 原文地址:https://www.cnblogs.com/zplogo/p/4544087.html
Copyright © 2020-2023  润新知