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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
如何使JavaScript休眠或等待
Apr 27 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
详解php中反射的应用
2016/03/15 PHP
php并发加锁示例
2016/10/17 PHP
如何打开php的gd2库
2017/02/09 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Django获取应用下的所有models的例子
2019/08/30 Python
keras之权重初始化方式
2020/05/21 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
幼儿教师工作感言
2014/02/14 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
广告词串烧
2014/03/19 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
四年级学生期末评语
2014/12/26 职场文书
质量保证书
2015/01/17 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android