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 相关文章推荐
json 定义
Jun 10 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue实现评论列表功能
Oct 25 Javascript
JS数组的高级使用方法示例小结
Mar 14 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
10个php函数实用却不常见
2015/10/13 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
js form action动态修改方法
2008/11/04 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python 字典的打印实现
2019/09/26 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python实现简单猜单词游戏
2020/12/24 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
银行授权委托书范本
2014/10/04 职场文书
首席执行官观后感
2015/06/03 职场文书
开学第一周总结
2015/07/16 职场文书