![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap 学习教程
在奋斗的大道
程序发烧友
展开
-
Bootstarp入门教程(5) 排版(2)
(3)缩略语:当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。 基本缩略语:必须包含title属性 Demo -->原创 2014-01-17 13:43:38 · 857 阅读 · 0 评论 -
Bootstarp学习教程(13) 其他相关组件(1)
分页:为您的网站或应用提供多页的分页组件,或是用更简单的翻页代替 默认分页:Rdio启发出了这个简单的分页,用在应用或搜索结果中超级棒。这个大块容易看见,容易缩放并有大块的点击区域。 Demo --> --> 主页 简介 信息 « 1原创 2014-01-18 16:12:51 · 796 阅读 · 0 评论 -
Bootstarp学习教程(12) 导航组件
导航:Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分。改变修饰类可以改变样式。 标签页:注意.nav-tabs类需要.nav基类。 Demo --> --> Home Profile Messages原创 2014-01-18 15:21:19 · 868 阅读 · 0 评论 -
Bootstarp学习教程(15) 其他组件(3)
原创 2014-01-18 16:35:55 · 654 阅读 · 0 评论 -
Bootstarp学习教程(11) 输入框组组件
基本案例:通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon的.input-group,可以给.form-control前面或后面追加元素。 @ <input type="text" class="form-control" placeholder="Username"> <span原创 2014-01-18 15:06:34 · 1300 阅读 · 0 评论 -
Bootstarp学习教程(10) 按钮组组件
按钮组:用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件,可以设置为单选框或多选框样式及行为。 Demo --> --> 左 中 右 按钮工具栏:把一组组合进一个做成更复杂的组件。 左 中 右 左 中 右 左原创 2014-01-17 18:18:40 · 823 阅读 · 0 评论 -
Bootstarp入门教程(3)栅格系统
栅格系统简介 栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理: “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。使用“行(row)”在水平方向创建一组“列(原创 2014-01-17 12:38:48 · 1166 阅读 · 0 评论 -
Bootstarp入门教程(2) 概述
概述: 深入了解Bootstrap底层结构的关键部分,包括我们让web开发变得更好、更快、更强壮的最佳实践。 (1)HTML5文档类型:Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型 Demo原创 2014-01-17 11:23:02 · 753 阅读 · 0 评论 -
Bootstarp学习教程(8) 按钮
按钮 选项 默认 主要 成功 信息 警告 危险 链接 尺寸:使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮 默认 主要 成功 信息 警告 危险 链接 通过给按钮添加 "btn-block"可以使其充满父节点100%的宽度,而且按钮也变原创 2014-01-17 17:36:23 · 1051 阅读 · 0 评论 -
Bootstarp入门教程(1)介绍
Bootstarp: 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目。大量工程师踊原创 2014-01-17 09:45:28 · 1195 阅读 · 0 评论 -
Bootstarp入门教程(6) 表格
基本案例:为任意标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。 Demo --> --> 第一列 第二列 第三列 第四列 1 2 3原创 2014-01-17 14:03:32 · 898 阅读 · 0 评论 -
Bootstarp入门教程(4) 排版(1)
(1)标题:HTML中的所有标题标签,从 到 均可用。 h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading (2)原创 2014-01-17 13:13:30 · 943 阅读 · 0 评论 -
Bootstarp学习教程(7) 表单
基本案例:“form-control”修饰的、和元素都将被默认设置为width: 100%;表单控件包裹在".form-group"中可以获得最好的排列 Demo --> --> 用户名 <input type="text" class="form-control" id="exampleInput原创 2014-01-17 17:20:48 · 2040 阅读 · 0 评论 -
Bootstarp学习教程(14) 其他相关组件(2)
页面标题:简单的h1样式,可以适当地分出空间且分开页面中的章节。像其它组件一样,它可以使用h1的默认small元素 Example page header Subtext for header 缩略图:用缩略图组件扩展Bootstrap的栅格系统,可以简单地显示栅格样式的图像,视频,文本,等等。 警告框:为典型的用户动作提供少数可用且灵活的反馈消息。要原创 2014-01-18 16:24:49 · 730 阅读 · 0 评论