BootStrap入门教程(二)之固定的内置样式


Posted in Javascript onSeptember 19, 2016

相关阅读:

HTML5文档类型(Doctype)

Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型。

<!DOCTYPE html>
<html>
....
</html>

移动设备优先

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

 

宽度设置为device-width可以确保它能正确呈现在不同设备上。

 initial-scale=1.0确保网页加载时,以1:1的比例呈现。

可以为viewport meta标签添加user-scalable=no来禁止其缩放功能。

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">

响应式图像

<img src="..." class="img-responsive" alt="响应式图像"> 
bootstrap.css里设置了img-responsive的属性:
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}

BootStrap入门教程(二)之固定的内置样式

基本的全局显示

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
body {margin:0}

BootStrap入门教程(二)之固定的内置样式

链接样式

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

默认设置有好有坏,难免嘛。

不想要下划线的话可以在a链接上加一个名为btn的class,该class的默认设置如下:

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;}

避免跨浏览器的不一致

Normalize.css提供了更好的跨浏览器一致性。

容器(Container)

<div class=”container”>
..
</div>

.container的样式:

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

左右外边距交由浏览器决定。

由于内边距是固定宽度,默认情况下容器是不可嵌套的。

.container:before,.container:after {
display: table;
content: " ";
}

设置display为table,会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌,:after伪元素清除浮动。content:” ”修复一些Opera bug。

.container:after {
clear: both;
}

另外还有申请相应的媒体查询:

@media (min-width: 768px) {
.container {
width: 750px;
}
}

BootStrap入门教程(二)之固定的内置样式

Bootstrap浏览器/设备支持

BootStrap入门教程(二)之固定的内置样式

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

参考:http://www.runoob.com/bootstrap/bootstrap-css-overview.html

以上所述是小编给大家介绍的BootStrap入门教程(二)之固定的内置样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
jQuery文字轮播特效
Feb 12 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 #Javascript
Node.js的基本知识简单汇总
Sep 19 #Javascript
React实现双向绑定示例代码
Sep 19 #Javascript
vue从使用到源码实现教程详解
Sep 19 #Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 #Javascript
jquery事件绑定解绑机制源码解析
Sep 19 #Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 #Javascript
You might like
php时间计算相关问题小结
2016/05/09 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
利用Python如何生成随机密码
2016/04/20 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python新手学习可变和不可变对象
2020/06/11 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
J2EE面试题大全
2016/08/06 面试题
致共产党员倡议书
2014/04/16 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
捐书仪式主持词
2015/07/04 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
妇产科护理心得体会
2016/01/22 职场文书