Boostrap使用方法(已经会用请走开)

说到boostrap, 我可以这样说,大概在半年前,我写页面的时候使用过它来布局及写样式, 但是根本没有好好学习过它,尤其它的珊格系统, 在布局的时候,它真的很好使,少写很多的css,而且响应式很好, 然而虽然我用过,但是还理解的很不全面. 现在我找到工作了,在实习做项目中又要使用它了, 对它很不熟悉,导致使用起来概念模糊,所以这就来好好学习它,整理一下, 使用起来更得心应手.

什么是 Bootstrap?

Bootstrap是由Twitter推出的开源CSS框架
历史
Bootstrap 是由 TwitterMark OttoJacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么学习和使用boostrap ?

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

Bootstrap 包的内容
  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

  • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。

  • 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

如何使用Boostrap ?

两种方法在我们的html文件里面引入它

方法一: 最简单,但是在网络通畅的情况下才有效

引入Boostrap的在线链接

  • 利用免费的CDN,你可以用BootStrap官网的免费CDN,或者其他的例如百度的静态资源库的 CDN 服务(简单的来说就是网址)

啥? 你不知道CDN是什么?
好,我来告诉你,CDN的全称是Content Delivery Network,即内容分发网络.
你就理解它是一个免费的服务器,而你要引入的文件放在这个服务器上,你直接用网址引用就行.

引入CDN也有两种选择:
  • BootStap官网提供的CDN:
    Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务,请进入BootCDN 主页查看更多可用的工具库。











  • 采用百度的静态资源库 (http://cnd.code.baidu.com/):
    百度的静态资源库的CDN服务,访问速度快,加速效果更明显,没有速度和带宽的限制,永久免费,引入代码如下:











这样你的环境就好了,你就可以直接使用Boostrap了.

方法二:

下载bootStrap到本地,从本地引入
谷歌/百度搜索 BootStrap, 然后去官网下载

Boostrap使用方法(已经会用请走开)_第1张图片

一般都提供了3种下载, 包但是Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了 压缩 与 未压缩 两种版本。
如下图:
Boostrap使用方法(已经会用请走开)_第2张图片

一般推荐下载第一种,用于生产环境的BootStrap包 (预编译(已经编译好的)的 Bootstrap)

  • 当您下载了 Bootstrap 的已编译的版本(第一种),解压缩 ZIP 文件,您将看到下面的文件/目录结构:


    Boostrap使用方法(已经会用请走开)_第3张图片
  • Bootstrap 源代码(如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:)


    Boostrap使用方法(已经会用请走开)_第4张图片

然后就是把下载的包复制到你的项目里,然后根据你的的路径引入就行,引入的文件和从cdn引入的文件一样












由于Boostrap所有的实现都是封装在类class属性中,所以下面的例子你可以看到Boostrap的实现是写在class中的.
simple example




     
    Bootstrap Example
        
    #这里是为了能够适应更多设备的响应式设计
    
    
   #引入Boostrap
     



Button

.btn 类是按钮的基本样式:
.btn-warning 该样式表示需要谨慎操作的按钮:
Boostrap使用方法(已经会用请走开)_第5张图片
测试结果
响应式设计

这是为了让你的BOOTstrap在小屏幕上,也正常显示大小,响应式页面设置,

你可能感兴趣的:(Boostrap使用方法(已经会用请走开))