前端学习 之 Bootstrap (一)
一、前言
1、简介
Bootsrtap作为一个前端框架,开箱即用,封装了前段开发的大量底层细节,开放灵活,对响应式设计网页很好支持,组件丰富,社区活跃。
特点:
- 可重用性
- 一致性
- 灵活的栅栏布局
- 定制化
- 社区活跃
- 面向未来和开放式开发
2、下载
二、预览
1、使用
直接引入
可以直接在HTML文件中引入Bootsrtap
<link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">
Bootstrap CDN:
所谓CDN就是通过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器可以并行的从CDN下载文件,不需要从自己的服务器下载文件。这些文件不在同一个域中,不会受浏览器的限制(同时只能在一个域下载几个文件)。因此下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。
优点:节省带宽,提高网站性能。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/版本号/css/bootstrap.min.css">
这也是web性能优化(页面访问)的一个方案
2、移动设备优先
在 Bootstrap 3 中,对移动设备友好的。为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
</head>
3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类container
与container-fluid
。但这两种 容器类不能互相嵌套
用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
container
会使页面给人居中的感觉
.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
.container-fluid
给人感觉平铺整个页面的流式布局容器
三、栅格系统
1、简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,内容就可以放入这些创建好的布局中,更好的实现设计的一致性。
在大屏幕中,栅格最多可以扩大到12列。小屏幕中所有的列都会堆叠起来。由于Bootstrap是移动优先,所以栅格其实是在小屏设备中定义了尺寸,而之一中定义的栅格尺寸也是和中屏设备和大屏设备。
类前缀名:
- 小尺寸手机屏幕:.col-xs- (分辨率<768px)
- 平板屏幕:- col-sm- (分辨率(≥768px))
- 小尺寸桌面屏幕:-col-md- (分辨率(≥992px)x)
- 大尺寸屏幕:.col-lg- (分辨率(≥1200px))
注:为了让网站页面有更好的而可读性,对列间距的宽度为默认30px。即列与列之间的空白区域。
2、不同设备的页面
移动设备和桌面屏幕:使用.col-xs-* 和 .col-md-*
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
手机、平板、桌面:使用.col-xs-* 和 .col-md-,.col-sm-
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
栅栏系统中一行中有十二列,而多出12列,最后一个元素就会换行重新排列。
3、偏移与排列
偏移:在一行中,两个元素占据不同的列数,不同的元素也可以以间距隔开,列向右侧偏移。
列偏移: .col-md-offset-
这些类实际是通过使用 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。
列排列: .col-md-push-* 和 .col-md-pull-* 类可以改变列(column)的顺序。
两个元素在一行中前后排列,占据不同的列数,使用列排列类就可以颠倒元素在页面中排列顺序。
三、排版
- 标题:HTML 中的所有标题标签 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式
- 页面主题:全局 font-size 设置为 14px,line-height 设置为 1.428。
- 中心内容:通过添加 .lead 类可以让段落突出显示
- 内联:
mark
- 删除:
del
- 无用文本:
s
- 插入文本:
ins
- 下划线:
u
- 小号文本:
small
默认为标准字体的百分之85 - 强调文本:
strong
- 斜体:
em
- 高亮:
b
用于高亮单词或短语,不带有任何着重的意味;i
标签主要用于发言、技术词汇等
- 对齐类:
- .text-center 居中
- .text-right 靠右
- .text-left 靠左
- 字母大小写:
- .text-lowercase
- .text-uppercase
- .text-capitalize
缩略语:当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。
四、练习
简单博客格式
1、 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row">
<p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
<p class="col-md-1 col-md-offset-5"><a href="#">登陆</a></p>
<p class="col-md-1"><a href="#">注册</a></p>
<p class="col-md-1"><a href="#">退出</a></p>
</header>
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="text-center">
<h2 class="text-capitalize">simple blog form</h2>
</div>
<div>
<div class="col-md-4 col-sm-6 text-lowercase">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻,也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么,也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人,我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界,你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗?<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人,你只是个凡人<br>
</p>
</div>
<div class="col-md-4 col-sm-6 text-uppercase">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻,也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么,也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人,我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界,你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗?<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人,你只是个凡人<br>
</p>
<blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
</div>
<div class="col-md-4 col-sm-12">
<blockquote title="stay hungry stay foolish">
<p>
Maybe I'm foolish maybe I'm blind<br>
也许是我太傻,也许是我眼瞎<br>
Thinking I can see through this and see what's behind<br>
以为我能看穿一切以及背后的真相<br>
Got no way to prove it so maybe I'm blind<br>
无法证明什么,也许是我被蒙蔽<br>
But I'm only human after all I'm only human after all<br>
但毕竟我是个凡人,我只是个凡人<br>
Don't put your blame on me<br>
请别把你的火撒在我身上<br>
Don't put your blame on me<br>
别把你的火撒在我身上<br>
Take a look in the mirror and what do you see<br>
看一眼镜中世界,你看到了什么<br>
Do you see it clearer or are you deceived in what you believe<br>
你洞穿了一切还是被信仰所欺骗?<br>
Cos I'm only human after all you're only human after all<br>
因为我只是个凡人,你只是个凡人<br>
</p>
</blockquote>
</div>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<ul>
<li>day1</li>
<ul>
<li>笔记一</li>
<li>笔记一</li>
<li>笔记一</li>
</ul>
<li>day2</li>
<li>day3</li>
</ul>
</div>
</div>
<footer>
<div class="text-center">
<address>
<strong> Twitter, Inc.</strong><br>
<abbr title="Phone">Phone:</abbr>0000000
</address>
</div>
</footer>
</div>
</body>
</html>
2、样式
前端学习 之 Bootstrap (一)的更多相关文章
- 前端学习之Bootstrap学习
一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...
- 前端学习 之 Bootstrap(二)
一.代码 内联代码:用<code>包裹,但是需要用<和>表示尖括号. 键盘输入:用<kbd>包裹表示键盘输入的内容. 多行代码:用<pre>包裹多行代码 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- web前端学习就这9个阶段,你属于哪个阶段?
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- (纯干货)最新WEB前端学习路线汇总初学者必看
Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...
- web前端学习路线(含20个真实web开发项目集合)
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- Web前端学习攻略
HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
随机推荐
- 快速部署Apache服务静态网站
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充, ...
- django-celery 创建多个broker队列 异步执行任务时指定队列
一.这里不再详细述说 django 框架中如何使用celery, 重点放在如何实现创建多个队列, 并指定队列存放异步任务 笔者使用 django-celery==3.2.2 模块, 配置项及配置参 ...
- BonnMotion支持的几种移动模型
BonnMotion是一款基于java的移动场景产生和分析工具,常用来研究mobile ad hoc network的特征.其产生的移动场景可以导入到几款网络模拟器中进行模拟分析,例如:NS2,NS3 ...
- 转载 Python 正则表达式入门(初级篇)
Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写.转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式 ...
- [原创]MOF提权下载者代码
0x001 网上的mof提权 调用的是js执行添加用户 而且有个缺陷 还不能一步到位...目标3389也连不上...也不知道上面安装了什么软件...毛然添加用户也不好比如有个类似狗之类的拦截添加用户 ...
- tf.nn.in_top_k原理探究
import tensorflow as tf; A = [[0.8,0.6,0.3], [0.1,0.6,0.4],[0.5,0.1,0.9]] B = [0,2,1] out = tf.nn.in ...
- Python日常实践(1)——SQL Prompt的Snippets批量整理
引言 个人平时在写sql脚本的时候会使用到SQL Prompt这款插件,除了强大的智能提示和格式化sql语句功能,我还喜欢使用Snippets代码段功能.比如我们可以在查下分析器输入ssf后按Tab键 ...
- Postgresql ---plv8扩展(windows下安装过程)
Postgresql下plv8安装过程其实很简单,但是在网络上搜集了半天都没有找到一篇满意的安装文档,现在总结如下: 1.下载和PostgreSQL相对应的plv8版本,下载地址如下: http:// ...
- underscore.js源码解析【集合】
// Collection Functions // -------------------- // The cornerstone, an `each` implementation, aka `f ...
- 通过spring抽象路由数据源+MyBatis拦截器实现数据库自动读写分离
前言 之前使用的读写分离的方案是在mybatis中配置两个数据源,然后生成两个不同的SqlSessionTemplate然后手动去识别执行sql语句是操作主库还是从库.如下图所示: 好处是,你可以人为 ...