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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
JavaScript实例 ODO List分析
Jan 22 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基础学习之流程控制的实现分析
2013/04/28 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
用Python实现KNN分类算法
2017/12/22 Python
Django如何配置mysql数据库
2018/05/04 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python word转pdf代码实例
2019/08/16 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
骨干教师培训感言
2014/01/16 职场文书
合同协议书格式
2014/04/18 职场文书
工作鉴定评语
2014/05/04 职场文书
新学期开学演讲稿
2014/05/24 职场文书
环保宣传标语
2014/06/12 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
文明家庭事迹材料
2014/12/20 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
python可视化大屏库big_screen示例详解
2021/11/23 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server