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 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

原生css写响应式网页

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media...

3439
来自专栏企鹅号快讯

5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。 在这篇文章中,我将介绍5个相对较新的CS...

1898
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

682
来自专栏破晓之歌

vue开源项目 原

优点:时间选择器配色舒适,进度条样式有虚线形式,步骤条更清晰相比有创新。表单字段点击后文字会上浮

8083
来自专栏贤羽的前端小栈

探索 PHP 与 Vue 通用直出模板方案

我们通常说的“页面直出”,其实就是服务端渲染(SSR, Server-Side Render)。最初的 JS SPA 方案有个常见的问题,就是脚本没有加载执行完...

2.9K2
来自专栏web前端

04 响应式

          2.1 媒体有覆盖性(当width: 1200px 时,符合下面两个条件,但是靠媒体样式的覆盖性,所以会采用第二个样式)

1030
来自专栏前端知识分享

第132天:移动web端-rem布局(进阶)

      该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注...

1523
来自专栏九彩拼盘的叨叨叨

用 Compass 分分钟地做图片精灵

对于页面仔来说,做图片精灵是一件枯燥无聊又废时的事。然后不甘于现状的人们发明了些做图片精灵的工具。我觉得用 Compass 来做图片精灵是最快速简单的。

1393
来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

4506
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

4682

扫码关注云+社区