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实现计算两个日期的间隔天数
Aug 14 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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实现的简单mock json脚本分享
2015/02/10 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP加密解密类实例代码
2016/07/20 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
理解Python中函数的参数
2015/04/27 Python
Python中的choice()方法使用详解
2015/05/15 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
详解python做UI界面的方法
2019/02/27 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
高中体育教学反思
2014/01/29 职场文书
竞选村长演讲稿
2014/04/28 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年度个人总结范文
2015/03/09 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
js 实现验证码输入框示例详解
2022/09/23 Javascript