欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Bootstrap 学习(1)_html/css_WEB-ITnose

程序员文章站 2024-02-13 21:46:34
...
简介

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap 包的内容

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

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

  • 下载 Bootstrap

    您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页:

    您会看到两个按钮:

  • Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  • Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
  • 引入所需的js和css文件

      注意:Jquey的文件必须在bootstrap.min.js之前引入、

    第一个例子,Hello World

    在线尝试 Bootstrap 实例

    Hello, world!

    Bootstrap 浏览器/设备支持

      Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

      旧的浏览器可能无法很好的支持。

      下表为 Bootstrap 支持最新版本的浏览器和平台:

    ChromeChrome FirefoxFirefox IEIE OperaOpera SafariSafari
    Android YES YES 不适用 NO 不适用
    iOS YES 不适用 不适用 NO YES
    Mac OS X YES YES 不适用 YES YES
    Windows YES YES YES* YES NO

    * Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

    Bootstrap 表格

    Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

    标签 描述
    ),用来标识表格列。 )。 内使用。
    为表格添加基础样式。
    表格标题行的容器元素(
    表格主体中的表格行的容器元素(
    一组出现在单行上的表格单元格的容器元素( )。
    默认的表格单元格。
    特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
    关于表格存储内容的描述或总结。

    表格类

    下表样式可用于表格中:

    类 描述 , 、
    .table 为任意 添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
    .table-striped
    .table-bordered 为所有表格的单元格添加边框
    .table-hover
    .table-condensed 让表格更加紧凑
    联合使用所有表格类

    下表的类可用于表格的行或者单元格:

    类 描述
    .active 将悬停的颜色应用在行或者单元格上
    .success 表示成功的操作
    .info 表示信息变化的操作
    .warning 表示一个警告的操作
    .danger 表示一个危险的操作

    基本的表格

    如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

    Bootstrap 实例 - 基本的表格
    基本的表格布局
    名称 城市
    Tanmay Bangalore
    Sachin Mumbai

    结果如下

    上下文类

    下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

    类类 描述描述描述
    .active 对某一特定的行或单元格应用悬停颜色
    .success 表示一个成功的或积极的动作
    .warning 表示一个需要注意的警告
    .danger 表示一个危险的或潜在的负面动作

    这些类可被应用到

    Bootstrap 实例 - 上下文类
    上下文表格布局
    产品 付款日期 状态
    产品1 23/11/2013 待发货
    产品2 10/11/2013 发货中
    产品3 20/10/2013 待确认
    产品4 20/10/2013 已退货

    结果如下图所示:

    响应式表格

    通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

    Bootstrap 实例 - 响应式表格
    响应式表格布局
    产品 付款日期 状态
    产品1 23/11/2013 待发货
    产品2 10/11/2013 发货中
    产品3 20/10/2013 待确认
    产品4 20/10/2013 已退货

    结果如下:

    按钮、在页面插入代码可看:

      致谢:感谢您的阅读!

    Bootstrap 学习(1)_html/css_WEB-ITnose

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • Bootstrap 学习(1)_html/css_WEB-ITnose
  • 专题推荐

    作者信息
    Bootstrap 学习(1)_html/css_WEB-ITnose

    认证0级讲师

    推荐视频教程
  • Bootstrap 学习(1)_html/css_WEB-ITnosejavascript初级视频教程
  • Bootstrap 学习(1)_html/css_WEB-ITnosejquery 基础视频教程
  • 视频教程分类