Bootstrap速学教程之简要介绍

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,不用请UI设计师也能开发出中规中矩的网页,并且最重要的是支持html5、css3移动端自适应,现在很多所谓的三合一五合一网站是基于bootstrap搭建的。

  我们来看一个简单的例子

<!DOCTYPE html><!-- html5格式 -->
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签放在最前面,其他内容跟随其后! -->
    <meta name="description" content="这是描述">
    <title>这是标题</title>
    <!-- 新 Bootstrap 核心 CSS 文件 cdn加速 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
      </div>
    </nav>

    <!-- 主题内容 -->
    <div class="container">
    </div>
  </body>
</html>

  笔记:

  1.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。

  2.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中 IE=edge

  3.Bootstrap 3 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。可选设置(viewport)设置 meta 属性为 user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感 觉。

  4.jquery用1.*版本,2.0版本不支持ie6/7/8

  5.<nav>是bootstrap中内置的导航样式,pc端可以展示完整的一行,移动端会收缩到右上角的菜单menu中

  6.内容主体div可以用container,有固定宽度并支持响应式布局的容器,container-fluid用于 100% 宽度

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

将你的网站打造成一个iOS Web App

最近在做一个手机主题,据说借用类似 link href="xx.png" rel="nofollow" rel="nofollow" rel="apple-to...

2126
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

732
来自专栏后端技术探索

http response code 301 和 302,你懂吗

一.官方说法 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Per...

671
来自专栏CSDN技术头条

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本...

1659
来自专栏后端技术探索

http response code 301 和 302,你懂吗

一.官方说法 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Per...

782
来自专栏Jerry的SAP技术分享

通过Java代码实现图片的放大和缩小

先看看效果吧。可以看到这个开发好的安卓应用有三个按钮:Zoom In缩小图片,Zoom Out放大图片和Save保存。

821
来自专栏数据小魔方

Excel常用数据导入方法

今天给大家讲解Excel数据源的导入 ▽ excel支持的数据源类型有很多 今天只讲解常用的三种类型 Access文件、网页数据、文本数据 Access数据源导...

2647
来自专栏云端架构

【云端架构】基于html5的本地多图上传并可在线预览

免插件多图上传的代码是通过html5将本地图片上传服务器,并实现上传之前的图片预览。本文只提供前端代码,后台代码自己研究哈。

3768
来自专栏IMWeb前端团队

React中如何不使用插件实现组件出现或消失动画

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 首先React本身是有动画插件的React.addons.Transitio...

3107
来自专栏企鹅号快讯

做网站-如何将设计稿还原为网页

做网站开发的伙伴应该很清楚,一个网站从设计到开发完成,经过的步骤,除了需求功能这些不说以外,其余的就是展现给用户的视觉上的效果了。一般由美工或者说设计师设计出页...

20310

扫描关注云+社区