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 Event学习第七章 事件属性
Feb 07 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript运算符小结
Jun 03 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
详解easyui 切换主题皮肤
Apr 04 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
PHP 裁剪图片
2021/03/09 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python探索之修改Python搜索路径
2017/10/25 Python
微信跳一跳游戏python脚本
2020/04/01 Python
tornado 多进程模式解析
2018/01/15 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python如何制作缩略图
2019/04/30 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
2013英文求职信模板范文
2013/11/15 职场文书
军人违纪检讨书
2014/02/04 职场文书
家具商场的活动方案
2014/08/16 职场文书
学校党员干部承诺书
2015/05/04 职场文书
简单的辞职信模板
2015/05/12 职场文书
学习党史心得体会2016
2016/01/23 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server