主要内容:表单布局,实例,实例,实例,支持的表单控件,实例,实例,实例,实例,静态控件,实例,表单控件状态,实例,表单控件大小,实例,表单帮助文本,实例在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列
主要内容:基本的表格,实例,可选的表格类,实例,实例,实例,实例,上下文类,实例,响应式表格,实例Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素(<tr>),用来标识表格列。 <tbody> 表格主体中的表格行的容器元素(<tr>)。 <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。 <td> 默认的表格单元格。 <th>
主要内容:实例,更多实例Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。 请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: < 和 >。 让我们来看看下面的
主要内容:标题,实例,实例,引导主体副本,实例,强调,实例,缩写,实例,地址(Address),实例,引用(Blockquote),实例,列表,实例,更多排版类Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例: 实例 <h1>我是
主要内容:什么是网格(Grid)?,什么是 Bootstrap 网格系统(Grid System)?,Bootstrap 网格系统(Grid System)的工作原理,媒体查询,网格选项,响应式的列重置,实例,偏移列,实例,嵌套列,实例,列排序,实例本章节我们将讲解 Bootstrap 的网格系统(Grid System)。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 什么是网格(Grid)? 摘自维
主要内容:HTML 5 文档类型(Doctype),移动设备优先,响应式图像,全局显示、排版和链接,避免跨浏览器的不一致,容器(Container),Bootstrap 浏览器/设备支持在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。 因此,请
主要内容:下载 Bootstrap,文件结构,HTML 模板,实例,实例,实例,Staticfile CDN 推荐Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载
主要内容:什么是 Bootstrap?,历史,为什么使用 Bootstrap?,Bootstrap 包的内容,在线实例,Bootstrap 实例,更多实例,Bootstrap 实例2什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2
主要内容:谁适合阅读本教程?,阅读本教程前,您需要了解的知识:,Bootstrap 有用的资源Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstr
主要内容:HTML 代码接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.xnip.cn/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 <div class="jumbotron text-center" style="margin-bottom:0"> <h1>我的第一个 Bootstrap
主要内容:基础多媒体对象,实例,多媒体对象嵌套,实例,多媒体对象图片显示在右边,实例,定位多媒体图片位置,实例Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等: 基础多媒体对象 要创建一个多媒体对象,可以在容器元素上添加 .media 类,然后将多媒体内容放到子容器上,子容器需要添加 .media-body 类,然后添加外边距,内边距等效果: 实例 <div class="media border p-3"> <img decoding=
主要内容:弹性盒子(flexbox),实例,实例,水平方向,实例,垂直方向,实例,内容排列,实例,等宽,实例,扩展,实例,排序,实例,外边距,实例,包裹,实例,内容对齐,实例,子元素对齐,实例,指定子元素对齐,实例,响应式 flex 类Bootstrap4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式
主要内容:边框,实例,边框颜色,实例,边框圆角设置,实例,浮动,实例,响应式浮动,实例,居中对齐,实例,宽度,实例,高度,实例,间距,实例Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span
主要内容:如何创建滚动监听,实例,实例滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听: 实例 <!-- 可滚动区域 --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> el
主要内容:如何创建弹出框,实例,指定弹出框的位置,实例,实例,关闭弹出框,实例,实例弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle="popover" 来来创建弹出框。 title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容: <a href="#" data-toggle="popover" title="弹出框标题" data-content=