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

相关文章

来自专栏小白安全

代码审计工具 Cobra 源码分析

0x00 前言 @0r3ak 师傅向我推荐了一款代码审计工具Cobra(wufeifei/cobra),该工具基于Python开发,可以针对多种语言的源...

3636
来自专栏欧阳大哥的轮子

iOS的MVC框架之控制层的构建(下)

在我的iOS的MVC框架之控制层的构建(上)一文中介绍了一些控制层的构建方法,而这篇文章则继续对一些方法进行展开讨论。MVC被众多开发者所诟病的C层的膨胀,究其...

893
来自专栏我和PYTHON有个约会

爬虫正传-江湖路远-0105-谁的刀快谁就有理

在web操作领域,为了减轻响应数据的体积和保证数据完整性的考虑,可以在浏览器允许的情况下,将数据压缩返回,压缩操作方式目前一般支持主流的两重操作方式[Accep...

542
来自专栏西枫里博客

thinkPHP升级到5.0.13导致update更新出错的问题

话题还得从tinkPHP群消息说起,双十二那天,群内通知官方发布了5.0.13版本。刚好那几天在折腾redis缓存。官方文档中说5.0.13是一个集合诸多改进的...

675
来自专栏Thinks

腾讯网新闻底层页无障碍代码细节

本周一部署在新闻频道并得到可反馈和升级。 现已部署在新闻频道、财经频道、体育频道、娱乐频道、公益频道。 主要针对于盲人用户使用的屏幕阅读器在阅读新闻底层页(新闻...

311
来自专栏lestat's blog

同一页面巧妙使用多个element-ui的upload组件

3034
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-05多组件 顶

AppComponent正在做所有的事情。 一开始,它展示了一个英雄的细节。 然后,它成为一个英雄和英雄细节列表的主/细节形式。 很快就会有新的要求和能力。 您...

451
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

812
来自专栏韩东吉的Unity杂货铺

零基础入门 18: UGUI Slider

现在教程的思路是按照UGUI的组件进行逐一的讲解,先是在Unity里的操作设置,以及代码段的操作控制。上一篇Toggle讲解之后,这篇就是UGUI里的Slide...

591
来自专栏linux驱动个人学习

深入 kernel panic 流程【转】

我们在项目开发过程中,很多时候会出现由于某种原因经常会导致手机系统死机重启的情况(重启分Android重启跟kernel重启,而我们这里只讨论kernel重启也...

1041

扫码关注云+社区