![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
文章平均质量分 61
Dannii_
一名苦逼加班的 做游戏的 后台开发的 程序猿 =_=
展开
-
bootstrap css样式(一)
基本的全局显示 使用 body {margin: 0;} 来移除 body 的边距网格系统 1、添加<div class="container">...</div> 元素,确保居中和最大宽度。 2、一旦添加了容器,接下来需要考虑以行为单位。添加 <div class="row">...</div>,并在行内添加列 <div class="col-md-6"></div>。 3、网格中的每一行原创 2017-03-05 14:56:32 · 1345 阅读 · 0 评论 -
Bootstrap徽章
徽章(Badges)主要用于突出显示新的或未读的项。 如需使用徽章,只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。<h4>胶囊式导航中的激活状态</h4><ul class="nav nav-pills"> <li class="active"> <a href="#"> 首页<span原创 2017-03-07 15:58:26 · 400 阅读 · 0 评论 -
Bootstrap缩略图
使用 Bootstrap 创建缩略图 : (1)在图像周围添加带有 .thumbnail 的 <a> 标签。 (2)这会添加四个像素的内边距(padding)和一个灰色的边框。 (3)当鼠标悬停在图像上时,会动画显示出图像的轮廓。<div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="th原创 2017-03-07 14:33:17 · 1339 阅读 · 0 评论 -
Bootstrap警告(Alerts)
一个基本的警告框: 创建一个 <div>,并向其添加一个 .alert 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一一个可取消的警告(Dismissal Alert): (1)创建一个 <div>,并向其添加一个 .alert 和四个上下文 class(即 .alert-success、.al原创 2017-03-07 14:12:38 · 2671 阅读 · 0 评论 -
Bootstrap进度条
基本结构<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</原创 2017-03-07 13:23:05 · 623 阅读 · 0 评论 -
Bootstrap媒体对象
基本结构:<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="bg.jpg" alt="媒体对象"> </a> <div class="media-body"> <h4 class="media-heading">媒体标题</h4>原创 2017-03-07 12:57:40 · 373 阅读 · 0 评论 -
Bootstrap列表组
基本结构:<ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li></ul><div class="list-group">原创 2017-03-07 11:10:56 · 371 阅读 · 0 评论 -
Bootstrap面板(Panels)
面板基本结构:<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> 带有 title 的面板标题 </h3> </div> <div class="panel-body"> 面板内容原创 2017-03-07 10:28:50 · 1193 阅读 · 0 评论 -
Bootstrap表单控件
输入框(Input) 最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。<form ro原创 2017-03-06 11:53:45 · 354 阅读 · 0 评论 -
Bootstrap表单(基本表单、内联表单、水平表单)
表单类型 <form> 标签和控件放在一个<div>里 所有的文本元素input、textarea、select 隐藏<label>标签 向标签<label>添加 垂直基本表单 role = “form” class = “form-group” class = “form-control” 内联表单 role = “form” class =原创 2017-03-06 10:42:46 · 30580 阅读 · 3 评论 -
Bootstrap表格
表格类 (1).table:为任意 <table> 添加基本样式 (只有横向分隔线) (2).table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) (3).table-bordered:为所有表格的单元格添加边框 (4).table-hover:在 <tbody> 内的任一行启用鼠标悬停状态 (5).table-condensed:行内边距(padd原创 2017-03-05 23:29:42 · 592 阅读 · 0 评论 -
Bootstrap代码
Bootstrap代码 (1)第一种是 <code> 标签。如果想要内联显示代码,那么应该使用 <code> 标签。 (2)第二种是<pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 <pre> 标签。<p><header>作为内联元素被包围</p> <p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p>原创 2017-03-05 22:52:25 · 606 阅读 · 0 评论 -
bootstrap排版
添加内联子标题 (1)添加<small>元素 (2)添加 .small class<h1>我是标题1<small>我是副标题</small></h1>引导主题副本 添加 class=”lead”,给段落添加强调文本,将得到更大更粗、行高更高的文本。<h2>引导主体副本</h2><p class="lead">这是一个演示引导主体副本用法的实例。</p><p>这是一个普通的文本。</p>强调原创 2017-03-05 18:52:51 · 256 阅读 · 0 评论 -
bootstrap响应式列重置、列偏移、列嵌套、列排序
列重置清除浮动:<div class="clearfix visible-xs"></div> 列偏移:<div class="col-md-offset-*"></div> 列排序:<div class="col-md-push/pull-*"></div>列重置之清除浮动 在小型屏幕上,我们希望看到这种情况: 在超小型屏幕下我们希望看到这样的情况: 可是由于所有的col-样式都是左原创 2017-03-05 16:35:31 · 2571 阅读 · 0 评论 -
Bootstrap导航元素
创建一个标签式的导航菜单: .nav .nav-tabs<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li></ul>胶囊式的导航菜单: .nav .nav-pills<ul c原创 2017-03-13 11:39:31 · 671 阅读 · 0 评论