BootstrapBookstap初步了解

Bootstrap 是一个用来快速支付 Web 应用程序和网站的前端框架。Bootstrap
是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 包的始末:
基本组织:Bootstrap
提供了一个饱含网格系统、链接样式、背景的着力构造。这将以 Bootstrap
基本组织 部分详细讲解。
CSS:Bootstrap 自带以下特征:全局的 CSS 设置、定义基本的 HTML
元素样式、可扩大的 class,以及一个产业革命的网格系统。这将当 Bootstrap CSS
部分详细讲解。
零件:Bootstrap
包含了十几只可选用的组件,用于创造图像、下拉菜单、导航、警告框、弹出框等等。这将在
布局组件 部分详细讲解。
JavaScript 插件:Bootstrap 包含了十几单自定义的 jQuery
插件。您可一直包含有的插件,也可以逐个包含这些插件。这将以 Bootstrap
插件 部分详细讲解。
定制:您得定制 Bootstrap 的组件、LESS 变量和 jQuery
插件来得到你自己之版本。

    Download Bootstrap:下载 Bootstrap。点击该按钮,您可下载 Bootstrap
CSS、JavaScript
和书的预编译的减版本。不含文档和最初的源代码文件。
    Download Source:下载源代码。点击该按钮,您可直接从 from
上得时的 Bootstrap LESS 和 JavaScript 源代码。

确保适当的绘图和触屏缩放:
<meta name=”viewport” content=”width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no”>
device-width 可以保证她会是呈现在不同装备及。
initial-scale=1.0 确保网页加载时,以 1:1
的比重呈现,不见面产生其它的缩放。
当活动装备浏览器上,通过也 viewport meta 标签上加 user-scalable=no
可以忍受用其缩放(zooming)功能。
一般状态下,maximum-scale=1.0 与 user-scalable=no
一起行使。这样受用缩放功能后,用户只能滚动屏幕,就可知于你的网站看上去更如原生应用之感觉到。

响应式图像:
<img src=”…” class=”img-responsive” alt=”响应式图像”>
img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto;
属性,可以吃图像按百分比缩放,不越其父元素的尺码。

中心的大局显示:
使用 body {margin: 0;} 来移除 body 的边距。
body {
  font-family: “Helvetica Neue”, Helvetica, Arial,
sans-serif;//字体样式
  font-size: 14px;//字体大小
  line-height: 1.428571429;//默认行高度
  color: #333333;//默认文本颜色
  background-color: #ffffff;//默认背景颜色
}

排版:
采取 @font-family-base、 @font-size-base 和 @line-height-base
属性作为排版样式。

链接样式:
 @link-color 设置全局链接的颜料。
于链接的默认样式,如下设置:
a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}//当鼠标悬停于链接上,或者点击了之链接,颜色会让设置为
#2a6496。同时,会呈现同样条下划线。

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}//点击过的链接,会表现一个颜色码为 #333
的精雕细刻之虚线轮廓。另一样漫长规则是安轮廓为 5 像素宽,且对冲 webkit
浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2
像素。

避过浏览器的未平等:
行使 Normalize 来建跨浏览器的一致性。
Normalize.css 是一个好粗的 CSS 文件,在 HTML
元素的默认样式中提供了再度好之超浏览器一致性。

容器(Container):
<div class=”container”>
container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

 container 的左右外边距(margin-right、margin-left)交由浏览器决定。
出于内边距(padding)是原则性宽度,默认情况下容器是不行嵌套的。

.container:before,
.container:after//:before 伪元素防止上边距崩塌,:after
伪元素清除浮动。
 {
  display: table;//会创建一个匿名的 table-cell
和一个初的块格式化上下文
  content: ” “;//修复
}

响应式列:<div class=”col-xs-6 col-sm-3″/>
偏移列: <div class=”col-xs-6 col-md-offset-3″/>
镶套列:被嵌套的行应包含一组列,这组列个数不能够跳12
列排序:
        <div class=”col-md-4 col-md-push-8″ style=” box-shadow: inset
1px -1px 1px #444, inset -1px 1px 1px #444;”>我当左侧
</div>
        <div class=”col-md-8 col-md-pull-4″ style=” box-shadow: inset
1px -1px 1px #444, inset -1px 1px 1px #444;”>
我在右</div>

标题:<h1></h1>
内联子标题:<h1><small></small></h1>
引主体副本:为了为段落添加强调文本,则好加上
class=”lead”,这将赢得重新不行还小、行高更强的文件
强调: <small>(设置文本也父文本大小的
85%)、<strong>(设置文本为再粗的文书)、<em>(设置文本为斜体)。
缩写:
<abbr title=”World Wide
Web”>WWW</abbr><br>//显示在文书底部的同样长虚线边框,当鼠标悬停于上头时会见显示完整的文件
<abbr title=”Real Simple Syndication”
class=”initialism”>RSS</abbr>//更粗书的公文
地址:使用 <address> 标签 使用<br>换行
引用;
blockquote>
  这是一个带有源标题的援。
  <small>Someone famous in <cite title=”Source Title”>Source
Title</cite></small>
</blockquote>
列表:有序<ol></ol>  无序<ul></ul>
Bootstrap 代码
Bootstrap 允许而为有限栽艺术展示代码:
先是种植是 <code> 标签。如果你想要内联显示代码,那么你应该运用
<code> 标签。
仲栽是 <pre>
标签。如果代码用给出示为一个单身的片元素或代码来差不多推行,那么您应该使用
<pre> 标签。

相关文章