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 相关文章推荐
Javascript this指针
Jul 30 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
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给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
layui table数据修改的回显方法
2019/09/04 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
JavaScript实现alert弹框效果
2020/11/19 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python 远程统计文件代码分享
2015/05/14 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
物资采购方案
2014/06/12 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
朋友聚会祝酒词
2015/08/10 职场文书