Bootstrap
关注
分享
扫一扫
文章平均质量分 85
大大大大大桃子
这个作者很懒，什么都没留下…
展开
-
Bootstrap 模态弹出框（Modals）
整理自慕课笔记 插件的源文件：modal.js。 在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示： <body><button class="btn btn-primary" type="button">点击我<原创 2017-03-24 15:28:26 · 6737 阅读 · 0 评论 -
Bootstrap 支持的JavaScript插件
整理自慕课笔记导入JavaScript插件Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuer原创 2017-03-24 15:10:57 · 738 阅读 · 0 评论 -
Bootstrap 面板
整理自慕课笔记 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。基础面板基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置原创 2017-03-23 20:49:50 · 1558 阅读 · 0 评论 -
Bootstrap 列表组
整理自慕课笔记 列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。基础列表组基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分： * list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 * list-group-原创 2017-03-23 20:30:19 · 1568 阅读 · 0 评论 -
Bootstrap 媒体对象
整理自慕课笔记 在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示： 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。默认媒体对象媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： * 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对原创 2017-03-23 19:53:14 · 1547 阅读 · 0 评论 -
Bootstrap 进度条
整理自慕课笔记 在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果： 基本样式Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就原创 2017-03-23 19:38:29 · 1074 阅读 · 0 评论 -
Bootstrap 警示框
整理自慕课笔记 在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示： 在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。默认警示框Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果： 1、成功警示框：原创 2017-03-23 18:24:26 · 1953 阅读 · 0 评论 -
Bootstrap 缩略图
整理自慕课笔记 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 通过“thumbnail”样式配合bootstrap的网格系统来实现。<div class="container">原创 2017-03-23 18:20:34 · 501 阅读 · 0 评论 -
Bootstrap 导航条
整理自慕课笔记导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。导航条和导航一样，在Bootstrap框架中是一个独立组件。在Boo原创 2017-03-23 15:51:16 · 8311 阅读 · 0 评论 -
Bootstrap 导航
基础样式导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。 Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“n原创 2017-03-23 14:21:22 · 770 阅读 · 0 评论 -
Bootstrap 按钮
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。 使用方法： 按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件原创 2017-03-22 20:25:15 · 903 阅读 · 0 评论 -
Bootstrap 菜单
基本用法小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件。在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：<scri原创 2017-03-22 19:13:11 · 1776 阅读 · 0 评论 -
Bootstrap 网格系统
实现原理网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。 在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）工作原原创 2017-03-22 18:44:45 · 565 阅读 · 0 评论 -
Bootstrap 表单
基础表单表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制原创 2017-03-22 18:00:53 · 2496 阅读 · 1 评论 -
Bootstrap 排版
GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。自定义JQuery插件，完整的类库，基于Less等。标题主标题Bootstrap和普通的HTML页面一样，定义标题都是使用标签原创 2017-03-22 14:01:23 · 1093 阅读 · 0 评论 -
Bootstrap 自定义
局限性很多时候在创建 Web 页面或应用的时，需要自己独立的 UI 界面效果，此时仅仅使用 Bootstrap 框架并不能满足我们自身 UI 的需求，也造成要写很多的样式代码来覆盖 Bootstrap 框架提供的样式代码。如此一来，这也失去使用 Bootstrap 框架的意义。 很多同学会问，我要使用Bootstrap框架，而且还要让其出来的 UI 界面效果能和满足自己的UI设计效果。解决方法在原创 2017-03-29 10:41:01 · 1548 阅读 · 0 评论 -
Bootstrap 的 JavaScript 插件
整理自慕课笔记 Bootstrap V3.2中提供了12种JavaScript插件，他们分别是： * 动画过渡（Transitions）:对应的插件文件“transition.js” * 模态弹窗（Modal）:对应的插件文件“modal.js” * 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” * 滚动侦测（Scrollspy）：对应的插件文件“scrollsp原创 2017-03-28 20:55:36 · 1060 阅读 · 0 评论 -
Bootstrap 动画过渡（Transitions）
整理自慕课笔记 动画过渡（Transitions）: 源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： * 调用统一编译的bootstrap.js； * 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。 tr原创 2017-03-24 15:16:27 · 9537 阅读 · 0 评论