中文文档

一、前言

1、简介

Bootsrtap作为一个前端框架,开箱即用,封装了前段开发的大量底层细节,开放灵活,对响应式设计网页很好支持,组件丰富,社区活跃。
特点:

  • 可重用性
  • 一致性
  • 灵活的栅栏布局
  • 定制化
  • 社区活跃
  • 面向未来和开放式开发

2、下载

官网地址

二、预览

1、使用

直接引入
可以直接在HTML文件中引入Bootsrtap

  1. <link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">

Bootstrap CDN
所谓CDN就是通过一个互联网部署在多个数据中心的大型分布式服务器系统。浏览器可以并行的从CDN下载文件,不需要从自己的服务器下载文件。这些文件不在同一个域中,不会受浏览器的限制(同时只能在一个域下载几个文件)。因此下载时不会一个一个排队。另外CDN会根据用户的位置和更快的路由速度来选择服务器下载文件。
优点:节省带宽,提高网站性能。

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/版本号/css/bootstrap.min.css">

这也是web性能优化(页面访问)的一个方案

2、移动设备优先

在 Bootstrap 3 中,对移动设备友好的。为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

  1. <head>
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3. </head>

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。

  1. <head>
  2. <meta name="viewport" content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
  3. </head>

3、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类containercontainer-fluid。但这两种 容器类不能互相嵌套
用于固定宽度并支持响应式布局的容器

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

container会使页面给人居中的感觉

.container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器。

  1. <div class="container-fluid">
  2. ...
  3. </div>

.container-fluid给人感觉平铺整个页面的流式布局容器

三、栅格系统

1、简介

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,内容就可以放入这些创建好的布局中,更好的实现设计的一致性。
在大屏幕中,栅格最多可以扩大到12列。小屏幕中所有的列都会堆叠起来。由于Bootstrap是移动优先,所以栅格其实是在小屏设备中定义了尺寸,而之一中定义的栅格尺寸也是和中屏设备和大屏设备。
类前缀名:

  • 小尺寸手机屏幕:.col-xs- (分辨率<768px)
  • 平板屏幕:- col-sm- (分辨率(≥768px))
  • 小尺寸桌面屏幕:-col-md- (分辨率(≥992px)x)
  • 大尺寸屏幕:.col-lg- (分辨率(≥1200px))
    注:为了让网站页面有更好的而可读性,对列间距的宽度为默认30px。即列与列之间的空白区域。

2、不同设备的页面

移动设备和桌面屏幕:使用.col-xs-* 和 .col-md-*

  1. <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  2. <div class="row">
  3. <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  4. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  5. </div>
  6. <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  7. <div class="row">
  8. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  9. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  10. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  11. </div>
  12. <!-- Columns are always 50% wide, on mobile and desktop -->
  13. <div class="row">
  14. <div class="col-xs-6">.col-xs-6</div>
  15. <div class="col-xs-6">.col-xs-6</div>
  16. </div>

手机、平板、桌面:使用.col-xs-* 和 .col-md-,.col-sm-

  1. <div class="row">
  2. <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3. <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <div class="row">
  6. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8. <!-- Optional: clear the XS cols if their content doesn't match in height -->
  9. <div class="clearfix visible-xs-block"></div>
  10. <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>

栅栏系统中一行中有十二列,而多出12列,最后一个元素就会换行重新排列。

3、偏移与排列

偏移:在一行中,两个元素占据不同的列数,不同的元素也可以以间距隔开,列向右侧偏移。
列偏移: .col-md-offset-
这些类实际是通过使用
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

列排列: .col-md-push-* 和 .col-md-pull-* 类可以改变列(column)的顺序。
两个元素在一行中前后排列,占据不同的列数,使用列排列类就可以颠倒元素在页面中排列顺序。

三、排版

  • 标题:HTML 中的所有标题标签 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式
  • 页面主题:全局 font-size 设置为 14px,line-height 设置为 1.428。
  • 中心内容:通过添加 .lead 类可以让段落突出显示
  • 内联:mark
  • 删除: del
  • 无用文本:s
  • 插入文本:ins
  • 下划线: u
  • 小号文本:small 默认为标准字体的百分之85
  • 强调文本:strong
  • 斜体:em
  • 高亮:
    • b用于高亮单词或短语,不带有任何着重的意味;
    • i 标签主要用于发言、技术词汇等
  • 对齐类:
    • .text-center 居中
    • .text-right 靠右
    • .text-left 靠左
  • 字母大小写:
    • .text-lowercase
    • .text-uppercase
    • .text-capitalize

缩略语:当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些。

四、练习

简单博客格式

1、 源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>blog</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  7. <link rel="stylesheet" href="css/bootstrap.min.css">
  8. </head>
  9. <body>
  10. <div class="container">
  11. <header class="row">
  12. <p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
  13. <p class="col-md-1 col-md-offset-5"><a href="#">登陆</a></p>
  14. <p class="col-md-1"><a href="#">注册</a></p>
  15. <p class="col-md-1"><a href="#">退出</a></p>
  16. </header>
  17. <div class="row">
  18. <div class="col-md-9 col-md-push-3">
  19. <div class="text-center">
  20. <h2 class="text-capitalize">simple blog form</h2>
  21. </div>
  22. <div>
  23. <div class="col-md-4 col-sm-6 text-lowercase">
  24. <p>
  25. Maybe I'm foolish maybe I'm blind<br>
  26. 也许是我太傻,也许是我眼瞎<br>
  27. Thinking I can see through this and see what's behind<br>
  28. 以为我能看穿一切以及背后的真相<br>
  29. Got no way to prove it so maybe I'm blind<br>
  30. 无法证明什么,也许是我被蒙蔽<br>
  31. But I'm only human after all I'm only human after all<br>
  32. 但毕竟我是个凡人,我只是个凡人<br>
  33. Don't put your blame on me<br>
  34. 请别把你的火撒在我身上<br>
  35. Don't put your blame on me<br>
  36. 别把你的火撒在我身上<br>
  37. Take a look in the mirror and what do you see<br>
  38. 看一眼镜中世界,你看到了什么<br>
  39. Do you see it clearer or are you deceived in what you believe<br>
  40. 你洞穿了一切还是被信仰所欺骗?<br>
  41. Cos I'm only human after all you're only human after all<br>
  42. 因为我只是个凡人,你只是个凡人<br>
  43. </p>
  44. </div>
  45. <div class="col-md-4 col-sm-6 text-uppercase">
  46. <p>
  47. Maybe I'm foolish maybe I'm blind<br>
  48. 也许是我太傻,也许是我眼瞎<br>
  49. Thinking I can see through this and see what's behind<br>
  50. 以为我能看穿一切以及背后的真相<br>
  51. Got no way to prove it so maybe I'm blind<br>
  52. 无法证明什么,也许是我被蒙蔽<br>
  53. But I'm only human after all I'm only human after all<br>
  54. 但毕竟我是个凡人,我只是个凡人<br>
  55. Don't put your blame on me<br>
  56. 请别把你的火撒在我身上<br>
  57. Don't put your blame on me<br>
  58. 别把你的火撒在我身上<br>
  59. Take a look in the mirror and what do you see<br>
  60. 看一眼镜中世界,你看到了什么<br>
  61. Do you see it clearer or are you deceived in what you believe<br>
  62. 你洞穿了一切还是被信仰所欺骗?<br>
  63. Cos I'm only human after all you're only human after all<br>
  64. 因为我只是个凡人,你只是个凡人<br>
  65. </p>
  66. <blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
  67. </div>
  68. <div class="col-md-4 col-sm-12">
  69. <blockquote title="stay hungry stay foolish">
  70. <p>
  71. Maybe I'm foolish maybe I'm blind<br>
  72. 也许是我太傻,也许是我眼瞎<br>
  73. Thinking I can see through this and see what's behind<br>
  74. 以为我能看穿一切以及背后的真相<br>
  75. Got no way to prove it so maybe I'm blind<br>
  76. 无法证明什么,也许是我被蒙蔽<br>
  77. But I'm only human after all I'm only human after all<br>
  78. 但毕竟我是个凡人,我只是个凡人<br>
  79. Don't put your blame on me<br>
  80. 请别把你的火撒在我身上<br>
  81. Don't put your blame on me<br>
  82. 别把你的火撒在我身上<br>
  83. Take a look in the mirror and what do you see<br>
  84. 看一眼镜中世界,你看到了什么<br>
  85. Do you see it clearer or are you deceived in what you believe<br>
  86. 你洞穿了一切还是被信仰所欺骗?<br>
  87. Cos I'm only human after all you're only human after all<br>
  88. 因为我只是个凡人,你只是个凡人<br>
  89. </p>
  90. </blockquote>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="col-md-3 col-md-pull-9">
  95. <ul>
  96. <li>day1</li>
  97. <ul>
  98. <li>笔记一</li>
  99. <li>笔记一</li>
  100. <li>笔记一</li>
  101. </ul>
  102. <li>day2</li>
  103. <li>day3</li>
  104. </ul>
  105. </div>
  106. </div>
  107. <footer>
  108. <div class="text-center">
  109. <address>
  110. <strong> Twitter, Inc.</strong><br>
  111. <abbr title="Phone">Phone:</abbr>0000000
  112. </address>
  113. </div>
  114. </footer>
  115. </div>
  116. </body>
  117. </html>

2、样式

前端学习 之 Bootstrap (一)的更多相关文章

  1. 前端学习之Bootstrap学习

    一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...

  2. 前端学习 之 Bootstrap(二)

    一.代码 内联代码:用<code>包裹,但是需要用<和>表示尖括号. 键盘输入:用<kbd>包裹表示键盘输入的内容. 多行代码:用<pre>包裹多行代码 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  5. web前端学习就这9个阶段,你属于哪个阶段?

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  6. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  7. web前端学习路线(含20个真实web开发项目集合)

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  8. Web前端学习攻略

    HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 快速部署Apache服务静态网站

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充, ...

  2. django-celery 创建多个broker队列 异步执行任务时指定队列

    一.这里不再详细述说 django 框架中如何使用celery, 重点放在如何实现创建多个队列, 并指定队列存放异步任务 笔者使用   django-celery==3.2.2 模块, 配置项及配置参 ...

  3. BonnMotion支持的几种移动模型

    BonnMotion是一款基于java的移动场景产生和分析工具,常用来研究mobile ad hoc network的特征.其产生的移动场景可以导入到几款网络模拟器中进行模拟分析,例如:NS2,NS3 ...

  4. 转载 Python 正则表达式入门(初级篇)

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写.转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式 ...

  5. [原创]MOF提权下载者代码

    0x001 网上的mof提权 调用的是js执行添加用户 而且有个缺陷 还不能一步到位...目标3389也连不上...也不知道上面安装了什么软件...毛然添加用户也不好比如有个类似狗之类的拦截添加用户 ...

  6. tf.nn.in_top_k原理探究

    import tensorflow as tf; A = [[0.8,0.6,0.3], [0.1,0.6,0.4],[0.5,0.1,0.9]] B = [0,2,1] out = tf.nn.in ...

  7. Python日常实践(1)——SQL Prompt的Snippets批量整理

    引言 个人平时在写sql脚本的时候会使用到SQL Prompt这款插件,除了强大的智能提示和格式化sql语句功能,我还喜欢使用Snippets代码段功能.比如我们可以在查下分析器输入ssf后按Tab键 ...

  8. Postgresql ---plv8扩展(windows下安装过程)

    Postgresql下plv8安装过程其实很简单,但是在网络上搜集了半天都没有找到一篇满意的安装文档,现在总结如下: 1.下载和PostgreSQL相对应的plv8版本,下载地址如下: http:// ...

  9. underscore.js源码解析【集合】

    // Collection Functions // -------------------- // The cornerstone, an `each` implementation, aka `f ...

  10. 通过spring抽象路由数据源+MyBatis拦截器实现数据库自动读写分离

    前言 之前使用的读写分离的方案是在mybatis中配置两个数据源,然后生成两个不同的SqlSessionTemplate然后手动去识别执行sql语句是操作主库还是从库.如下图所示: 好处是,你可以人为 ...