Bootstrap
关注
分享
扫一扫
前端组件基础库以及css样式库
俊刚、
爱学习，爱生活，爱联盟！！！
展开
-
Bootstrap学习--初识Bootstrap
1.什么是Bootstrap？答：Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。原创 2016-10-25 18:55:21 · 701 阅读 · 0 评论 -
Bootstrap 学习之 （十七）------ 面板
Bootstrap 面板（Panels）本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示： 这是一个基本的面板 结果如下所示：面板标题原创 2016-11-02 17:13:00 · 948 阅读 · 0 评论 -
Bootstrap 学习之（十六）------ 列表组
Bootstrap 列表组列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：向元素 添加 class .list-group。向 添加 class .list-group-item。向列表组添加徽章我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 元素中添加 即可。原创 2016-11-02 16:51:16 · 504 阅读 · 0 评论 -
Bootstrap 学习之（十五）------ 媒体对象,well
Bootstrap 多媒体对象（Media Object）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。 BootstrapTest原创 2016-11-02 16:32:13 · 387 阅读 · 0 评论 -
Bootstrap 学习之 (十四) ------警告框与进度条
Bootstrap 警告（Alerts）警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。您可以通过创建一个 ，并向其添加一个 .alert class 和四个上下文 class（即 .alert-su原创 2016-11-02 15:50:24 · 697 阅读 · 0 评论 -
Bootstrap 学习之 (十三) ------ 巨幕 ,页头,缩略图
Bootstrap 超大屏幕（Jumbotron）本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：创建一个带有 class .jumbotron. 的容器 。除了更大的 ，字体粗细 font-weight 被原创 2016-11-02 15:24:09 · 2102 阅读 · 0 评论 -
Bootstrap 学习之 (十二) ------ 标签与徽章
Bootstrap 标签标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签Example heading class="label label-default">New可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、la原创 2016-11-02 14:56:11 · 685 阅读 · 0 评论 -
Bootstrap 学习之 (十一) ------ 分页
Bootstrap 分页分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页面上显示分页。 class="paginati原创 2016-11-02 14:18:09 · 577 阅读 · 0 评论 -
Bootstrap 学习之（十）------ 导航与导航条
导航Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。标签页注意 .nav-tabs 类依赖 .nav 基类。 Home Profile Messages胶囊式标签页HTML 标记相同，但使用 .nav-pills 类： Home Profile Messages原创 2016-10-31 15:56:05 · 4510 阅读 · 0 评论 -
Bootstrap 学习之 （九）------ 输入框组
输入框组通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。只支持文本输入框 这里请避免使用 元素，因为 WebKit 浏览器不能完全绘制它的样式。避免使用 元素，由于它们的 rows 属性原创 2016-10-31 15:42:25 · 2120 阅读 · 0 评论 -
Bootstrap 学习之（八）------ 按钮组
按钮组通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。按钮组中的工具提示和弹出框需要特别的设置当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。原创 2016-10-31 15:15:41 · 576 阅读 · 0 评论 -
Bootstrap 学习之（七）------ 下拉菜单
下拉菜单下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown）JavaScript 的互动来实现。如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。 BootstrapTest 主题原创 2016-10-31 14:39:01 · 551 阅读 · 0 评论 -
Bootstrap 学习之（六）------ 字体图标
如何使用出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。不要和其他组件混合使用图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。只对内容为空的元素原创 2016-10-31 14:21:34 · 698 阅读 · 0 评论 -
Bootstrap 学习之 (五) ------ 图片及辅助类
响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。SVG 图像和 IE 8-10在 Internet Explorer 8-10 中，设置为 .img-respons原创 2016-10-31 14:05:05 · 686 阅读 · 0 评论 -
Bootstrap 学习之(四) ------ 表单
基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。内联表单为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件原创 2016-10-31 13:37:46 · 828 阅读 · 0 评论 -
Bootstrap 学习之(三) ------ 表格和按钮
表格：Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：标签描述为表格添加基础样式。表格标题行的容器元素（），用来标识表格列。表格主体中的表格行的容器元素（）。一组出现在单行上的表格原创 2016-10-31 13:30:38 · 600 阅读 · 0 评论 -
bootstrap 学习之（二）------ 排版
BootstrapTest 我是标题1 h1. 我是副标题1 h1 我是标题2 h2. 我是副标题2 h2 我是标题3 h3. 我是副标题3 h3 我是标题4 h4. 我是副标题4 h4 我是标题5 h5. 我是副标题5 h5 我是标题6原创 2016-10-28 16:38:07 · 558 阅读 · 0 评论 -
Bootstrap 学习之 (一) ------ 网格系统
1.什么是 Bootstrap网格系统（GridSystem）？答:Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。原创 2016-10-28 15:30:52 · 783 阅读 · 0 评论