文章分类 -  Bootstrap学习

1 2 下一页
Bootstrap之：模态窗口
摘要：Bootstrap提供了单独的js文件来提供模态窗口功能，同时也都集成到了bootstrap.min.js中Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其... 阅读全文
posted @ 2014-12-18 08:45 第九剑 阅读(5366) 评论(0) 推荐(0) 编辑
Bootstrap之：面板
摘要：面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。下面列出了几种样式：.panel-default .panel-primary .panel-success .panel-warning .panel-info .panel-danger... 阅读全文
posted @ 2014-12-17 22:23 第九剑 阅读(112) 评论(0) 推荐(0) 编辑
Bootstrap之：媒体对象和媒体对象列表
摘要：一、媒体对象在Web页面或者说移动页面制作中，常常看到这样的效果，图片居左（或居右），内容居右（或居左）排列，我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。... 阅读全文
posted @ 2014-12-17 21:53 第九剑 阅读(382) 评论(0) 推荐(0) 编辑
Bootstrap之：进度条--带Label的进度条
摘要：20% 阅读全文
posted @ 2014-12-17 21:16 第九剑 阅读(332) 评论(0) 推荐(0) 编辑
Bootstrap之：警示框
摘要：Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果： 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色； 2、信息警示框：给用户提供提示信息，在“alert... 阅读全文
posted @ 2014-12-17 20:58 第九剑 阅读(1562) 评论(0) 推荐(0) 编辑
Bootstrap之：缩略图
摘要：Boostrap已经对缩略图做了组件，我们可以通过添加类样式thumbnail来实现。同时通过添加类样式caption来实现图片下的说明例如： Bootstrap框架系列教程 Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bo... 阅读全文
posted @ 2014-12-17 20:21 第九剑 阅读(172) 评论(0) 推荐(0) 编辑
Bootstrap之：徽章
摘要：从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读。可以用来做出收件，未读件数之类的效果。使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标... 阅读全文
posted @ 2014-12-16 22:21 第九剑 阅读(129) 评论(0) 推荐(0) 编辑
Bootstrap之：标签
摘要：在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。使用方法很简单，你可以在使用span这样的行内标签：Example heading New和按钮元素button类似，la... 阅读全文
posted @ 2014-12-16 22:17 第九剑 阅读(162) 评论(0) 推荐(0) 编辑
Bootstrap之：分页样式
摘要：一、链接一起的分页按钮 «第一页 上一页 下一页 最后一页»二、按钮行的分页样式在使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。例如： «上一页 下一页» «上一页 下一页» «上一页 ... 阅读全文
posted @ 2014-12-16 22:13 第九剑 阅读(227) 评论(0) 推荐(0) 编辑
Bootstrap之：导航条
摘要：一、基础导航条在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。在制作一个基础导航条时，主要分以下几步：第一步：首先在制作导航的列表()基础上添加类名“navbar-nav”第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“na... 阅读全文
posted @ 2014-12-16 22:09 第九剑 阅读(214) 评论(0) 推荐(0) 编辑
Bootstrap之：导航
摘要：一、基本样式Bootstrap框架中制作导航主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。例如： Home CSS3SassjQueryResponsive二、垂直导航栏制作垂直堆叠导航只需要... 阅读全文
posted @ 2014-12-16 20:09 第九剑 阅读(102) 评论(0) 推荐(0) 编辑
Bootstrap之：按钮（等分按钮）和按钮的向下向上三角形
摘要：等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名，如下所示： 首页 产品展示 案例分析 联系我们 按钮三角形向上只需要添加类：dropup 按钮下拉菜单 按钮下拉菜单项 按钮下拉菜单项 按钮下... 阅读全文
posted @ 2014-12-16 19:37 第九剑 阅读(3317) 评论(0) 推荐(0) 编辑
Bootstrap之：按钮（嵌套分组）
摘要：很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。例如： 首页 产品展示 案例分析 联系我们 关于我们 公司简介 企业文化 组织结构 客服服务 ... 阅读全文
posted @ 2014-12-16 19:23 第九剑 阅读(133) 评论(0) 推荐(0) 编辑
Bootstrap之：下拉菜单（菜单标题）
摘要：通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。如下： 下拉菜单 第一部分菜单头部 下拉菜单项 下拉菜单项 下拉菜单项 第二部分菜单头部 下拉菜单项 下拉菜单项 下拉菜单项 阅读全文
posted @ 2014-12-16 16:51 第九剑 阅读(121) 评论(0) 推荐(0) 编辑
Bootstrap之：下拉菜单（基本用法）
摘要：使用方法：1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:data-toggle="dropdown"3、下拉菜单项使... 阅读全文
posted @ 2014-12-16 16:36 第九剑 阅读(173) 评论(0) 推荐(0) 编辑
bootstrap之：网格
摘要：有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在... 阅读全文
posted @ 2014-12-16 16:06 第九剑 阅读(95) 评论(0) 推荐(0) 编辑
bootstrap之：图标
摘要：这里说的图标就是Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片例如：具体手册见：http://getbootstrap.com/components/ 阅读全文
posted @ 2014-12-16 15:51 第九剑 阅读(116) 评论(0) 推荐(0) 编辑
Bootstrap 之：图像
摘要：图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片例如： 阅读全文
posted @ 2014-12-16 15:18 第九剑 阅读(142) 评论(0) 推荐(0) 编辑
块状按钮
摘要：但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个... 阅读全文
posted @ 2014-12-16 15:10 第九剑 阅读(239) 评论(0) 推荐(0) 编辑
bootstrap之：按钮(button)
摘要：btn基础按钮 btn-success 成功按钮 btn-danger 危险按钮btn-default 默认按钮 btn-info 信息按钮 btn-link 链接按钮btn-primary 主要按钮 btn-warning 警告按钮基础按钮.btn 默认按钮.btn-default 主要按钮.... 阅读全文
posted @ 2014-12-16 14:59 第九剑 阅读(705) 评论(0) 推荐(0) 编辑

1 2 下一页