![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
qq_976637254
我qq号976637254.加我请注明编程
展开
-
序bootstrap引用(0)
如果网络好的话可以直接连库。<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js...原创 2018-12-27 17:19:15 · 89 阅读 · 0 评论 -
bootstrap输入框组(13)
向 .form-control 添加前缀或后缀元素的步骤如下:把前缀或后缀元素放在一个带有 class .input-group 的 &lt;div&gt; 中。接着,在相同的 &lt;div&gt; 内,在 class 为 .input-group-addon 的 &lt;span&gt; 内放置额外的内容。把该 &lt;span&gt; 放置在 &原创 2018-12-28 15:25:28 · 366 阅读 · 0 评论 -
bootstrap导航元素(14)
表格导航或标签创建一个标签式的导航菜单:以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。<p>标签式的导航菜单</p><ul class="nav nav-tabs"> <li class="active"><a href="#">Home<原创 2018-12-28 15:26:53 · 181 阅读 · 0 评论 -
bootstrap导航栏(15)
默认的导航栏创建一个默认的导航栏的步骤如下:向 <nav> 标签添加 class .navbar、.navbar-default。向上面的元素添加 role="navigation",有助于增加可访问性。向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这...原创 2018-12-29 14:42:32 · 158 阅读 · 0 评论 -
bootstrap面包屑导航(16)
Bootstrap 面包屑导航(Breadcrumbs)面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。<ul class="breadcrumb"> <li><a href="#">Home</a></li&原创 2018-12-29 14:44:36 · 342 阅读 · 0 评论 -
bootstrap分页(17)
Bootstrap 分页本章将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。分页(Pagination)下表列出了 Bootstrap 提供的处理分页的 class。Class 描述 示例代码.pagination 添加该 class 来在页面上显示分页。 &lt;ul class="pa...原创 2018-12-29 14:52:29 · 200 阅读 · 0 评论 -
bootstrap徽章(18)
Bootstrap 徽章(Badges)本章将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 &lt;span class="badge"&gt; 添加到链接、Bootstrap 导航等这些元素上即可。下面的实例演示了这点:实例展示未读邮件:&lt;a...原创 2018-12-29 14:52:45 · 351 阅读 · 0 评论 -
bootstrap超大屏幕(19)
Bootstrap 超大屏幕(Jumbotron)本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:创建一个带有 class .jumbotron. 的容器 <div>。除了更大的 <h1>,字体粗细 ...原创 2018-12-29 14:59:08 · 229 阅读 · 0 评论 -
bootstrap页面标题(20)
Bootstrap 页面标题(Page Header)页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把您的标题放置在带有 class .page-header 的 <div> 中:实例<div ...原创 2018-12-29 15:01:47 · 183 阅读 · 0 评论 -
bootstrap缩略图(21)
Bootstrap 缩略图本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:在图像周围添加带有 class .thumbnail 的 <a> 标签。这会添加四个像素的内边距(padding)和一个灰色的边框。当鼠标悬停在图像上时,会动...原创 2018-12-29 15:03:46 · 236 阅读 · 0 评论 -
bootstrap按钮下拉菜单(12)
如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。<div class="btn-group"> <button type="button" class="btn btn-default dro原创 2018-12-28 15:24:06 · 116 阅读 · 0 评论 -
bootstrap按钮组(11)
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 &lt;div class="btn-group"&gt; &lt;button type="button" class="btn btn-default"&gt;Button1&原创 2018-12-28 15:21:07 · 153 阅读 · 0 评论 -
bootstrap 下拉菜单(10)
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret">&原创 2018-12-28 15:16:34 · 78 阅读 · 0 评论 -
bootstrap概述(1)
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示<meta name="viewport" content="width=device-width, initial-scale=1.0">在移动设备浏览器上,通过为 viewport meta 标签添加user-scal...原创 2018-12-27 17:21:43 · 199 阅读 · 0 评论 -
bootstrap网格系统(2)
媒体查询媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值。/* 超小设备(手机,小于 768px) *//* Bootstrap 中默认情况下...原创 2018-12-27 17:26:30 · 97 阅读 · 0 评论 -
bootstrap排版(3)
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式内联子标题如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 ,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本引导主体副本为了给段落添加强调文本,则可以添加 class=“lead”,这将得到更大更粗、行高更高的文本,<small>本行内容是在标签内&l...原创 2018-12-27 17:36:14 · 106 阅读 · 0 评论 -
bootstrap代码显示(4)
Bootstrap 允许您以两种方式显示代码:第一种是 <code>标签。如果您想要内联显示代码,那么您应该使用 <code> 标签。第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。请确保当您使用 <pre> 和 <code>标签时,开始和结束标签使用了...原创 2018-12-27 17:46:25 · 247 阅读 · 0 评论 -
bootstrap表格(5)
<table> 为表格添加基础样式。<thead>表格标题行的容器元素<tr>,用来标识表格列。<tbody> 表格主体中的表格行的容器元素。<tr> 一组出现在单行上的表格单元格的容器元素)。<td> 默认的表格单元格。<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)<c原创 2018-12-27 17:54:57 · 130 阅读 · 1 评论 -
bootstrap表单(6)
垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:向父 元素添加 role=“form”。把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。向所有的文本元素 <input>、<textarea> 和 <select...原创 2018-12-27 18:05:30 · 101 阅读 · 0 评论 -
bootsrap按钮(7)
以下样式可用于<a>, <button>, 或 <input> 元素上:类 描述 实例.btn 为按钮添加基本样式 尝试一下.btn-default 默认/标准按钮 尝试一下.btn-primary 原始按钮样式(未被操作) 尝试一下.btn-success 表示成功的动作 尝试一下.btn-info 该样式可用于要弹出信息的按钮 尝试一下.btn...原创 2018-12-28 08:44:43 · 163 阅读 · 0 评论 -
bootstrap图片(8)
.img-rounded 为图片添加圆角 (IE8 不支持).img-circle 将图片变为圆形 (IE8 不支持) .img-thumbnail 缩略图功能 .img-responsive 图片响应式 (将很好地扩展到父元素)原创 2018-12-28 08:47:56 · 137 阅读 · 0 评论 -
bootstrap辅助类(9)
文本以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:类 描述 实例.text-muted “text-muted” 类的文本样式 .text-primary “text-primary” 类的文本样式 .text-success “text-success” 类的文本样式 .text-info “text-info” 类的文本样式 .text-warning...原创 2018-12-28 08:52:33 · 295 阅读 · 0 评论 -
bootstrap警告(22)
Bootstrap 警告(Alerts)本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件。您可以通过创建一个 <div>...原创 2018-12-29 15:12:26 · 181 阅读 · 0 评论