BootStrap入门教程(二)之固定的内置样式_javascript技巧

相关阅读:

BootStrap入门教程(一)之可视化布局

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%;
}

基本的全局显示

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
body {margin:0}

链接样式

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 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

参考:http://www.runoob.com/bootstrap/bootstrap-css-overview.html

以上所述是小编给大家介绍的BootStrap入门教程(二)之固定的内置样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, 样式
bootstrap内置样式
bootstrap javascript、bootstrap select样式、bootstrap table样式、bootstrap 按钮样式、bootstrap button样式,以便于您获取更多的相关知识。

时间: 2024-11-02 20:43:58

BootStrap入门教程(二)之固定的内置样式_javascript技巧的相关文章

详解JavaScript的内置对象_javascript技巧

什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法:能够在对象上执行的动作.例如,表单的"提交"(Submit),时间的"获取"(getYear)等: JavaScript 提供多个内建对象,比如 String.Date.Array 等等,使用对象前先定义,如下使用数组对象: var objectName =new Ar

Bootstrap零基础入门教程(二)_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

Div+CSS布局入门教程(二) -- 写入整体层结构与CSS

css|教程|入门教程 二.写入整体层结构与CSS 接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=

BootStrap入门教程(一)之可视化布局_javascript技巧

下载地址:http://v3.bootcss.com/getting-started/ HTML模板: <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstr

if else 处理条件详细教程(javascript入门教程二)

文章提供这款if else 处理条件详细教程(网页特效入门教程二),很简单举了几个实例来说明关于js中的if else条件成立与不成立的详细教程. <script language="javascript" type="text/javascript"> <!-- var points=prompt("请输入学生成绩:",0); if(points>=90){  alert("a"); }else if

XP系统卸载内置软件的技巧

  XP系统卸载内置软件的技巧          方法一         电脑常识 1.鼠标单击"开始"菜单,选择"控制面板"选项,在弹出的窗口中选择"添加/删除程序"图标; 2.在打开的窗口中选择要卸载的软件; 3.单击卸载软件程序,弹出提示窗口,点击"确定"键就完成卸载; 方法二 单击"开始"菜单,选择"所有程序"选项,选择要卸载的软件,单击卸载即可.

.NET轻量级MVC框架:Nancy入门教程(二)——Nancy和MVC的简单对比

在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)--初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比有什么不同,哪个更好?Nancy是否可以脱离IIS等等,那么今天就拿MVC和Nancy做个简单的对比吧!首先说一点,我对MVC研究并不深入,如有没说到或说错的地方,还请大家补充和纠正. 下面纠正一个问题,Nancy官网并没有明确的说Nancy是一个MVC框架,官方的定义是:Nancy是一个用于构建基

零基础易语言入门教程(二)之编程思路_易语言

易语言简介: 易语言是一门以中文作为程序代码编程语言.以"易"著称.创始人为吴涛.早期版本的名字为E语言.易语言最早的版本的发布可追溯至2000年9月11日.创造易语言的初衷是进行用中文来编写程序的实践.从2000年至今,易语言已经发展到一定的规模,功能上.用户数量上都十分可观. 上一篇跟大家讲了零基础易语言入门教程(一)编写第一个程序,然后接下来大家应该自己把支持库和易语言组件里面的控件全部认真的看一下,下面我直接跟大家分享下易语言简单编程思路. 方法和步骤如下所示: 1.易语言程序

ASP编程入门进阶(四):内置对象Request

request|编程|对象|内置对象 系统学习ASP,就是先从ASP的几大内置对象开始的.一般称五大对象:Request.Response.Server.Session.Application今天先来看看Request对象. 当然一直还没有提到的就是,ASP到底是什么样?我看代码怎么知道是ASP代码?很简单,当看到"<%"和"%>"就表明是ASP,并且两者之间的就是ASP源码. 那为什么要学对象,对象的作用又是如何的?其实ASP所提供的这些可在脚本中使用