bootstrap : 学习笔记

通过添加 

img-responsive class

可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

 

---

 

body默认值

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

 

---

 

 

a默认，在chrome会有特别的设置

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

 

 

---

 

 

Bootstrap 使用 normalize

http://necolas.github.io/normalize.css/ 

来建立跨浏览器的一致性。

 

---

 

 

容器（Container）

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
.container:before,
.container:after {
  display: table;
  content: " ";
}
.container:after {
  clear: both;
}
@media (min-width: 768px) {
   .container {
      width: 750px;
}

 

 

---

 

 

移动设备优先策略

• 内容
  • 决定什么是最重要的。
• 布局
  • 优先设计为更小的宽度。
  • 基础的 CSS 地址是移动设备优先，媒体查询地址是针对于平板电脑、台式电脑。
• 渐进增强
  • 随着屏幕大小的增加而添加元素。

---

 

 

xs ( Extra small devices, 小于 768px 比如手机 )

sm ( Small devices, 小于 992px, 比如平板 )

md ( Medium devices, 小于 1200px, 比如桌面计算机)

lg ( Large devices, 比如宽屏显示器 )

 

---

 

 

列在不同的宽下会有自己的计算宽的方法

 

---

 

 

.visible-xs	额外的小设备（小于 768px）可见
.visible-sm	小型设备（768 px 起）可见
.visible-md	中型设备（768 px 到 991 px）可见
.visible-lg	大型设备（992 px 及以上）可见
.hidden-xs	额外的小设备（小于 768px）隐藏
.hidden-sm	小型设备（768 px 起）隐藏
.hidden-md	中型设备（768 px 到 991 px）隐藏
.hidden-lg	大型设备（992 px 及以上）隐藏

 

 

 

 

 

 

 

---

 

 

<abbr title="World Wide Web">WWW</abbr>
方便link的描述，带有问号的icon

---

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

address默认是block属性，可能对seo有帮助

---

blockquote
这我没用过，在这里会有border-left 5px

---

<code>
<pre>
在html写代码用这个就对啦

---

class="table-striped"
条纹

---

active

success

warning

danger

在table里是bgcolor，颜色的主题看来已经定好了

---

sr-only

阅读器才可以看到的