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 相关文章推荐
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
详解Bootstrap插件
Apr 25 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python实现web方式logview的方法
2015/08/10 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
帕克纽约:PARKER NY
2018/12/09 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
保送生自荐信范文
2013/10/06 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
培训后的感想
2015/08/07 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
2016年学校招生广告语
2016/01/28 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS