1.移动端的CSS:

一般需要引入下面的外部样式表:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。[1]  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

2.在Bootstrap下,我们设计<div class="">

3.文本居中:

4.移动端的长条按钮:

第一种:

第二种:

第三种:

第四种:col-xs-4这种类,4表示4列,xs表示额外的小

在这之前,要先把所有的按钮放到同一个<div class="row ">

5.涉及文本的类:

第一种:

6.涉及图片自适应的类:

2016.8.14 HTML5重要标签及其属性学习的更多相关文章

  1. 2016.8.14 HTML5重要标签以及属性学习

    1.响应网格系统,这使得它很容易把元素放在行,并指定每个元素的相对宽度 . 要注意的是: 在使用网格布局系统之前,要不把布局的元素都添加到同一个<div>中,而且这个<div> ...

  2. 2016.8.16 HTML5重要标签及其属性学习

    1.运用BootStrap的基本布局: 2.基本布局第二步: ] 3.BootStrap提供了一个class=”well“”类,可以给你种深度的感觉: 4.不是每一个类都是为了CSS,有些类创建出来只 ...

  3. HTML5 重要标签及其属性学习

    1.google字体:<link href="https://fonts.googleapis.com/css?family=Lobster" rel="style ...

  4. HTML5 重要标签以及属性学习

    1.一个标签可以有多个,class=“A B C ” 效果: 2.padding的扩展:当padding的值是正的时候,元素显示的大小会变大:当padding的值是负的时候,元素显示的大小会变小 pa ...

  5. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. html5新增标签和属性

    结构性标签:<header>头部</header><nav>导航</nav><section>用于表达书的一章或一部分</sectio ...

  7. HTML5新标签和属性

    1.<time>标签(支持IE9以上和其他浏览器) 今年是<time datetime="2015-12-12">2015年</time> &l ...

  8. HTML5 <a>标签download 属性

    一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...

  9. 第十课html5 新增标签及属性 html5学习5

    一.常用新增标签 1.header:定义页面的页眉头部 2.nav:定义导航栏 3.footer:定义页面底部,页脚 4.article:定义文章 5.section:定义区域 6.aside:定义侧 ...

随机推荐

  1. 针对SYN洪水攻击的防御措施

    可以运用sysctl命令进行配置,由于本命令参数较多,这里只简单记录几个比较常用的参数: 1.tcp_max_syn_backlog 这个参数指定了后备队列可维持的TCP半开连接的数目,如果该值设定很 ...

  2. linux 增加用户 useradd 用法小结及配置文件说明

    转自CSDN,http://blog.csdn.net/warden2010/article/details/5132290,谢谢作者 在Linux 系统中,所有的用户和组像一个国家.如果国家要繁荣昌 ...

  3. Windows update 失败的解决方案

    由于刚刚装了新的系统,结果在电脑用了刚刚一周之后,我打开了自动更新,结果电脑就一直处于更新状态中.期初我以为是更新比较慢,等等可能就结束了,结果等了足足一晚上,到了第二天,电脑显示是:配置更新失败,正 ...

  4. Vim 强大的配置

    新建文件.vimrc,然后复制如下内容,并将该文件放到vim安装目录下 map <F9> :call SaveInputData()<CR> func! SaveInputDa ...

  5. Spring自动装配与扫描注解

    1 javabean的自动装配 自动注入,减少xml文件的配置信息. <?xml version="1.0" encoding="UTF-8"?> ...

  6. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现

    前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代 ...

  7. 命名空间 - PHP笔记

    转: 概述 命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念,比如在操作系统中,目录用来将相关文件分组,对于目录中的文件来说,目录就扮演了命名空间的角色.这个原理应用到程序设计领域就是命 ...

  8. 20145206邹京儒《Java程序设计》第5周学习总结

    20145206 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 8.1 语法与继承架构 package CH5; /** * Created by Administrato ...

  9. 两个viewport的故事(第一部分)

    原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如< ...

  10. HDU5558 Alice's Classified Message(合肥区域赛 后缀数组)

    当初合肥区域赛的题(现场赛改了数据范围就暴力过了),可惜当初后缀数组算法的名字都没听过,现在重做下. i从1到n - 1,每次枚举rank[i]附近的排名,并记录当起点小于i时的LCP(rank[i] ...