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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
vue组件间通信解析
Mar 01 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
详解es6新增数组方法简便了哪些操作
May 09 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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php错误级别的设置方法
2013/06/17 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
jquery datatable服务端分页
2016/08/31 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
Python+微信接口实现运维报警
2016/08/27 Python
Python File readlines() 使用方法
2018/03/19 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python判断设备是否联网的方法
2018/06/29 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Python实现结构体代码实例
2020/02/10 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
如何验证python安装成功
2020/07/06 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
pycharm永久激活超详细教程
2020/10/29 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
英国著名书店:Foyles
2018/12/01 全球购物
小学母亲节活动方案
2014/03/14 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
会计系毕业求职信
2014/08/07 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python