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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
javascript实现拖放效果
Dec 16 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
bing Map 在vue项目中的使用详解
Apr 09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
记一次vue跨域的解决
Oct 21 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP静态成员变量
2017/02/14 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
js滑动提示效果代码分享
2016/03/10 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
vue组件与复用详解
2018/04/08 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
pymysql模块的操作实例
2019/12/17 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
怎样写演讲稿
2014/01/04 职场文书
药品营销策划方案
2014/06/15 职场文书
家庭困难证明
2014/10/12 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
Nginx配置使用详解
2022/07/07 Servers