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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
微信小程序使用蓝牙小插件
Sep 23 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 HTML代码串截取代码
2008/12/29 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
javascript实现数独解法
2015/03/14 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
python实现12306火车票查询器
2017/04/20 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
详解python中递归函数
2019/04/16 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Ado与Ado.net的相同与不同
2014/12/08 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
小学教师听课制度
2014/02/01 职场文书
中华魂演讲稿
2014/05/13 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
教师年终个人总结
2015/02/11 职场文书
身份证丢失证明
2015/06/19 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android