bootstrap简介

Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。


使用bootstrap的好处
1.移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
2.浏览器支持:所有的主流浏览器都支持 Bootstrap。
3.容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
4.响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。


Bootstrap 包的内容
1.基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
2.CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
3.组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
4.JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。


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

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,但不建议这样使用)。


20160329123809757.jpg

bootstrap把根据屏幕大小把屏幕分为了4个层级,小于768像素的为超小屏幕,大于等于768像素的为小屏幕,大于等于992像素的为中等屏幕,大于等于1200像素的则为大屏幕,相应的类前缀见图或查看官方文档,根据栅格参数,我们看下下面这幅图:


20160329124043797.jpg

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

容器(Container)
<div class="container">
...
</div>


本人学识有限 文章多有不足

若有错误 请大方指出 以免误导他人

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

推荐阅读更多精彩内容

  • 学习完整课程请移步 互联网 Java 全栈工程师 本节视频 【视频】使用 Bootstrap-Bootstrap ...
    撸帝阅读 2,695评论 0 1
  • BootStrap简介 基于:HTML ,CSS ,JAVAScript的前端框架实现相应是布局移动设备优先 HT...
    Marlon666阅读 1,514评论 0 1
  • 这里,我们简单了解,Bootstap的开发语言,应用场景,兼容性http://www.bootcss.com/ht...
    梦想成为小仙女阅读 3,468评论 0 4
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,728评论 3 184
  • 文中摄影作品来自著名摄影家~陈峰 1. 我们一起,赤身裸体 唯一的欲望,战天斗地 世界于你我而言,是野性浪漫 忘记...
    清水无痕阅读 3,085评论 2 2