响应式布局 Bootstrap(01)
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
Bootstrap 插件全部依赖 jQuery
<!DOCTYPE html>
<html lang="zh-cn"> //lang属性指定当前页面所用的自然语言 注意是为浏览器自动翻译提供基础功能 屏幕阅读软件的基础发音
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //为小IE存在 跨IE浏览器兼容性级别 启动内核
<meta name="viewport" content="width=device-width, initial-scale=1">// 重点 (view )视口的概念
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> //让老IE兼容H5新标签<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>//让老IE支持媒体查询
</head>
<body>
<h1>你好,世界!</h1>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> //这个不多说 jq
<script src="js/bootstrap.min.js"></script>
</body>
</html>官网抓来的模板 注释补上,另外为了方便使用bootlint 需要copy一段启动代码,见boot中文网
2.css类
全局css
按钮
.btn block.btn-default
.btn.btn-color( 5种基础颜色) .btn-lg/sm/xs
(关于size的class)图片 .img-circle .img-thumbnail img-responsive .img-round
精彩继续:
列表 .list-unstyle .list-online 文字排版 .textcolor
5种基础颜色.bgcolor
5种基础颜色.text-uppercase 大写
.text-lowercase 小写.text-capitalize 首字母大
.text-left 对齐方式
.text-right.text-center
.text-justify
辅助类 .hidden[-lg][-md][-sm][-xs] .pull-left/right
左右浮动.clearfix 清除浮动
.caret 三角箭头
.close 关闭按钮.table
.tabke-bordered.table-striped
.table-hover
.table-response
表单 默认表单 水平表单 行内
响应式布局 Bootstrap(01)的更多相关文章
- 响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
- 10套免费的响应式布局 Bootstrap 模版
1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
随机推荐
- MyBatis关联查询 (association) 时遇到的某些问题/mybatis映射
先说下问题产生的背景: 最近在做一个用到MyBatis的项目,其中有个业务涉及到关联查询,我是将两个查询分开来写的,即嵌套查询,个人感觉这样更方便重用: 关联的查询使用到了动态sql,在执行查询时就出 ...
- WCF初探-13:WCF客户端为双工服务创建回调对象
前言: 在WCF初探-5:WCF消息交换模式之双工通讯(Duplex)博文中,我讲解了双工通信服务的一个应用场景,即订阅和发布模式,这一篇,我将通过一个消息发送的例子讲解一下WCF客户端如何为双工服务 ...
- linux getch()实现
#include <termio.h> int getch(void){ struct termios tm, tm_old; int fd = 0, ch; ...
- 从一个ISP移至另一个ISP而不改变IP的方案
某客户从一个ISP_A移到了另一个ISP_B.但是,其WEB服务器由于之前对外公布的是IP地址,且无DNS,因此,要求该服务器搬至ISP_B后,用户依然可以访问原来的IP地址,求方案. 假设:ISP_ ...
- sftp搭建
在Centos 6.6环境使用系统自带的internal-sftp搭建SFTP服务器. 打开命令终端窗口,按以下步骤操作. 0.查看openssh的版本 ssh -V 使用ssh -V 命令来查看op ...
- linux下各种软件的安装过程
//////知识储备//////////////////////////////////////////////////////////////////// /var 下存放着服务和经常改变的文件 / ...
- web前端基础篇⑧
1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...
- [转]unity3d 脚本参考-技术文档
unity3d 脚本参考-技术文档 核心提示:一.脚本概览这是一个关于Unity内部脚本如何工作的简单概览.Unity内部的脚本,是通过附加自定义脚本对象到游戏物体组成的.在脚本对象内部不同志的函数被 ...
- JDBC中的ResultSet
ResultSet:结果集.存放数据库中的数据,可以将它想象成一张数据表,通过Statement对象中的executeQuery()方法获得 import com.mysql.jdbc.Stateme ...
- easyui datagrid
function initData(){ //数据列表 yftjsy=$("#yftjsy").datagrid({ url: '', fit:true, showFooter:f ...