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事件模型代码
Jul 01 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
Vue加载json文件的方法简单示例
Jan 28 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之第五天
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python学生信息管理系统修改版
2018/03/13 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
质量月口号
2014/06/20 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
法院答辩状格式
2015/05/22 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
通过Python把学姐照片做成拼图游戏
2022/02/15 Python