当前位置:Gxlcms > JavaScript > BootStrap入门教程(二)之固定的内置样式

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

相关阅读:

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

HTML5文档类型(Doctype)

Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型。

  1. <!DOCTYPE html>
  2. <html>
  3. ....
  4. </html>

移动设备优先

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

   宽度设置为device-width可以确保它能正确呈现在不同设备上。

 initial-scale=1.0确保网页加载时,以1:1的比例呈现。

  可以为viewport meta标签添加user-scalable=no来禁止其缩放功能。

  1. <meta name="viewport" content="width=device-width,
  2. initial-scale=1.0,
  3. maximum-scale=1.0,
  4. user-scalable=no">

响应式图像

  1. <img src="..." class="img-responsive" alt="响应式图像">
  2.   bootstrap.css里设置了img-responsive的属性:
  3. .img-responsive {
  4. display: inline-block;
  5. height: auto;
  6. max-width: 100%;
  7. }

基本的全局显示

  1. body {
  2. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  3. font-size: 14px;
  4. line-height: 1.428571429;
  5. color: #333333;
  6. background-color: #ffffff;
  7. }
  8. body {margin:0}

链接样式

  1. a:hover,
  2. a:focus {
  3. color: #2a6496;
  4. text-decoration: underline;
  5. }
  6. a:focus {
  7. outline: thin dotted #333;
  8. outline: 5px auto -webkit-focus-ring-color;
  9. outline-offset: -2px;
  10. }

  默认设置有好有坏,难免嘛。

  不想要下划线的话可以在a链接上加一个名为btn的class,该class的默认设置如下:

  1. a:hover,
  2. a:focus {
  3. color: #2a6496;
  4. text-decoration: underline;}
  5. a:focus {
  6. outline: thin dotted #333;
  7. outline: 5px auto -webkit-focus-ring-color;
  8. outline-offset: -2px;}

避免跨浏览器的不一致

  Normalize.css提供了更好的跨浏览器一致性。

容器(Container)

  1. <div class=”container”>
  2. ..
  3. </div>

  .container的样式:

  1. .container {
  2. padding-right: 15px;
  3. padding-left: 15px;
  4. margin-right: auto;
  5. margin-left: auto;
  6. }

  左右外边距交由浏览器决定。

  由于内边距是固定宽度,默认情况下容器是不可嵌套的。

  1. .container:before,.container:after {
  2. display: table;
  3. content: " ";
  4. }

  设置display为table,会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌,:after伪元素清除浮动。content:” ”修复一些Opera bug。

  1. .container:after {
  2. clear: both;
  3. }

  另外还有申请相应的媒体查询:

  1. @media (min-width: 768px) {
  2. .container {
  3. width: 750px;
  4.   }
  5. }

Bootstrap浏览器/设备支持

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

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

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

人气教程排行