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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
js读取本地文件的实例
Dec 22 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
JS数据类型判断的几种常用方法
Jul 07 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+SqlServer实现分页显示
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python Django基础二之URL路由系统
2019/07/18 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
法律工作求职自荐信
2013/10/31 职场文书
社区活动邀请函范文
2014/01/29 职场文书
员工晚婚的请假条
2014/02/08 职场文书
初级会计求职信范文
2014/02/15 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
收款委托书范本
2014/09/11 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
python实现过滤敏感词
2021/05/08 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python