bootstrap入门指引

个别类的使用

  中间广告用的大块--jumbotron是大屏的意思
  

  按钮  btn btn-lg
  
Sign up today
  导航栏  navbar
  内容推到最右边 
Back to top
  图形弄成圆圈 
  两段内容之间划线 

  下拉菜单的类是 dropdown
    下拉菜单里面的内容所在的类是 dropdown-menu
      点击的a标签里面

  对话框变小的类  modal-sm
  按钮Sign in
  按钮如果加上btn-block，则按钮是一个小块，否则按钮的大小随着Input框的大小一样

1.bootstrap的引入模板:

    
        
        
        
           
        
        
        
                
        
        
    
    
        
Hello, world!

        
        
        
         
    

2排版

bootstrap覆盖了原来的标题样式，bootstrap标题的样式如下,其中h1-h3的margin-bottom应该为20px，让非标题元素使用标题的样式，可以为其加上类名h1-h6：

Paste_Image.png

    Bootstrap 将全局 font-size 设置为 **14px**，
    line-height设置为 **1.428**。
    这些属性直接赋予 元素和所有段落元素。另外，
    
段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

    1.主题页面   
...
    2.中心内容通过添加 .lead类可以让段落突出显示。
...
    3.内联文本元素,把某个单词高亮显示...
    You can use the mark tag to highlight text.
    4.被删除的文本...
    5.无用文本 ...
    6.插入文本...,在内容下面加下划线

3. 标题的样式---类名学习：

（1）强调类名

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

a.text-primary:hover {
color: #3071a9;
}

a.text-success:hover {
color: #2b542c;
}

a.text-info:hover {
color: #245269;
}

a.text-warning:hover {
color: #66512c;
}

a.text-danger:hover {
color: #843534;
}

(2)对齐类名

.text-left：左对齐
.text-right：右对齐
.text-center：居中
.text-justify：两端

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

例

 

   
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

    加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

    主页查看更多可用的工具库。
  
  

  
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

    加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

    主页查看更多可用的工具库。
  
  

  
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

    加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

    主页查看更多可用的工具库。
  
  

  
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。
  

效果如下

Paste_Image.png

3)改变文本字体的大小写

Lowercased text.
Uppercased text.
Capitalized text.

4）列表类名
默认情况下，bootstrap中的无序列表和有序列表带有项目符号，利用类.list-unstyled去除项目符号

.list-unstyled {padding-left: 0;list-style: none;}
 ul ol 水平列表：list-inline
把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示

dl 水平列表：dl-horizontal
屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果

类名.list-inlinc用来实现内联列表，也就是将垂直列表幻城水平列表，并去掉项目符号，保持水平显示，其为制作水平导航而生

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定义列表，bootstrap没有太大的调整，只是调整了行间距，外边距和字体效果

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定义列表就像内联列表一样，bootstrap添加类.dl-horizontal即可，但是只有在屏幕大于768px的时候才有效

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

引用

默认样式的引用
将任何 HTML 元素包裹在 
 中即可表现为引用样式。对于直接引用，我们建议用 
 标签。

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.



  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  
Someone famous in Source Title



  ...

4. 代码模块

code显示单行内联代码
pre显示多行代码
kbd显示用户输入代码
其中pre为其添加类.prc-scrollablc可以控制其最大高度为340px;超出则出现滚动条，可防止占有太多篇幅

Paste_Image.png

5.表格

表格式Bootstrap中的一个基础组件之一，bootstrap为表格设置了一种基础样式和四种附加样式以及一个响应式的表格

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

Paste_Image.png

Paste_Image.png

Paste_Image.png

bootstrap还为提供了5种不同的类名

Paste_Image.png

6.bootstrap-图标

    Bootstrap框架中也为大家提供了近200个不同的icon图片，
    而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

传送门：中文http://getbootstrap.com/components/#glyphicons
传送门：英文http://v3.bootcss.com/components/

    查看所有图标名称
任何行级元素都可以，通常使用span标签坐图标容器
在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，

7.bootstrap的全局样式，移除了body中的margin声明，设置body的颜色为白色，为排版设置了基本的字体、字号和行高，设置全局链接颜色，且当链接处于hover状态时才回显示下划线样式，以下摘录自其css文件

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}