0215--Bootstrap

1.Bootstrap网格系统(Grid System)
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

图片.png

(1)一些预定义的网格类,比如 .row 和 .col-xs-4;
(2)网格选项:

图片.png

(3) Bootstrap 网格的基本结构:


图片.png

(4)实例:手机,平板,电脑


图片.png

(5)实现内容对设备的显示和隐藏:


图片.png

其中*指:block,inline,inline-block;

(6)偏移列:为了在大屏幕显示器上使用偏移,请使用 .col-md-offset- 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
(7)嵌套列;
(8)列排序:可以改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

2.Bootstrap排版
http://www.runoob.com/bootstrap/bootstrap-typography.html

3.Boorstrap代码
code,pre
使用两个标签时,内部的代码如果用到<>需要使用 unicode 变体: < 和 >。

4.Bootstrap表格
http://www.runoob.com/bootstrap/bootstrap-tables.html

5.Bootstrap表单
http://www.runoob.com/bootstrap/bootstrap-forms.html

6.Bootstrap按钮
http://www.runoob.com/bootstrap/bootstrap-buttons.html

7.Bootstrap图片
http://www.runoob.com/bootstrap/bootstrap-images.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Boots...
    亮亮叔家的小笔笔阅读 1,006评论 2 4
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,955评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,157评论 0 42
  • 养儿从来不是一件轻松的事,要不也不会有“养儿一百天常忧九十九”这句俗语,现在想来一点也不过分。有时候感觉宝宝任何一...
    恰是逝水流年阅读 3,053评论 0 5