博客专栏  >  前端   >  bootstrap 学习

bootstrap 学习

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

关注
5 已关注
18篇博文
  • Bootstrap学习--初识Bootstrap

    1.什么是Bootstrap? 答:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstr...

    2016-10-25 18:55
    282
  • Bootstrap 学习之 (一) ------ 网格系统

    1.什么是 Bootstrap 网格系统(GridSystem)? 答: Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12...

    2016-10-28 15:30
    273
  • bootstrap 学习之(二)------ 排版

    BootstrapTest 我是标题1 h1. 我是副标题1 h1 我是标题2 h2. 我是副标题2 h...

    2016-10-28 16:38
    182
  • Bootstrap 学习之(三) ------ 表格和按钮

    表格: Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 为表格添加基础样式。 表格标题行的...

    2016-10-31 13:30
    172
  • Bootstrap 学习之(四) ------ 表单

    基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和  元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到...

    2016-10-31 13:37
    210
  • Bootstrap 学习之 (五) ------ 图片及辅助类

    响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 heig...

    2016-10-31 14:05
    227
  • Bootstrap 学习之(六)------ 字体图标

    如何使用 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。 不要...

    2016-10-31 14:21
    264
  • Bootstrap 学习之(七)------ 下拉菜单

    下拉菜单 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown)JavaScript 的互动来实现。 如需使用下列菜单,只需要在 class .dropdo...

    2016-10-31 14:39
    164
  • Bootstrap 学习之(八)------ 按钮组

    按钮组 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用...

    2016-10-31 15:15
    164
  • Bootstrap 学习之 (九)------ 输入框组

    输入框组 通过在文本输入框  前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类,可以给 .form-cont...

    2016-10-31 15:42
    509
  • Bootstrap 学习之(十)------ 导航与导航条

    导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。 标签页 注意 .nav-tabs 类依赖 .nav 基类。 Home P...

    2016-10-31 15:56
    1478
  • Bootstrap 学习之 (十一) ------ 分页

    Bootstrap 分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。 下表列出了 Bootstrap 提供的处理分页的 class。...

    2016-11-02 14:18
    266
  • Bootstrap 学习之 (十二) ------ 标签与徽章

    Bootstrap 标签 标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签 Example heading class="label label-defau...

    2016-11-02 14:56
    190
  • Bootstrap 学习之 (十三) ------ 巨幕 ,页头,缩略图

    Bootstrap 超大屏幕(Jumbotron) 本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外...

    2016-11-02 15:24
    262
  • Bootstrap 学习之 (十四) ------警告框与进度条

    Bootstrap 警告(Alerts) 警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内...

    2016-11-02 15:50
    193
  • Bootstrap 学习之(十五)------ 媒体对象,well

    Bootstrap 多媒体对象(Media Object) .media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。 .media-list:如...

    2016-11-02 16:32
    147
  • Bootstrap 学习之(十六)------ 列表组

    Bootstrap 列表组 列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下: 向元素 添加 class .list-group。 向 添加 class .l...

    2016-11-02 16:51
    140
  • Bootstrap 学习之 (十七)------ 面板

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 元素添加 class ....

    2016-11-02 17:13
    416

CSS3 实例
1010740
html5 实例
104839
img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部