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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
构建一个JavaScript插件系统
Oct 20 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写的serv-u的web申请账号的程序
2006/10/09 PHP
php获取文件大小的方法
2014/02/26 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php制作简单模版引擎
2016/04/07 PHP
php图片上传类 附调用方法
2016/05/15 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
Node.js JSON模块用法实例分析
2019/01/04 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python logging模块handlers用法详解
2020/08/14 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
JDO的含义
2012/11/17 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
员工入职担保书范文
2014/04/01 职场文书
学习雷锋倡议书
2014/04/15 职场文书
中学生励志演讲稿
2014/04/26 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
行政处罚告知书
2015/07/01 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android