布局组件 下拉按钮 <div class="dropdown"><button class="btn dropdown-toggle" id=drop1 data-toggle="dropdown">帮助<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="drop1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#"> 关于我们 </a></li><li role="presentation"><a role="menuitem" href="#"> 关于我们 </a></li><li role="presentation"><a ro...
Bootstrap对代码显示提供了三种方式：内联代码 1.使用 元素显示单行内联代码 内联代码主要是设置code元素的背景颜色和其内部的文字颜色。 //用法 <code><body></body></code>//源码 code {padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px; }2.使用 元素显示用户输入代码 元素包含的内容是表示该内容需要用户键盘输入，所以一般是设置成input 的效果，用法和code类似 //用法 <pre> <...
按钮是任何系统都不能缺少的组件，设置到按钮的大小、颜色、状态等。 //btn源码 .btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: ...
本文大家分享了Bootstrap CSS布局之图像，供大家参考，具体内容如下 img-rounded、img-circle、img-thumbnail(缩放图模式) //源码 img {vertical-align: middle; } .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {display: block;max-width: 100%;height: auto; } .img-rounded {border-radius: 6px; } //缩略图模式 .img-thumbnail {display: inlin...
1 基础布局组件 在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。 CSS组件，总结为8大类型的样式： 基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式 1.1基础样式 基本样式，一般包含文本字体，颜色背景，边框，定位等，如下面警告框： //源码 .alert {padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px; }1.2颜色样式 看BootStra...
bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位的个人总结，具体详情如下所示： bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 浏览器缩放 --><title>Bootstrap</title><!-- Bootstrap -->...
废话不多说了，直接给大家贴代码了，具体代码如下所示：<!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .nav-logo...
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 浏览器缩放 --><ti...
看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。 1. 创建基本的页面 我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。 1.1 新建一个文件， Ctrl + N 1.2 保存到页面文件中，Ctrl + S，命名为 index.html 1.3 在这个空白页面中，输入 html:5，然后直接按制表键 Tab，就应该可以看到一个基本的 HTML5 模板页面了。 1.4 再...
下载地址：http://v3.bootcss.com/getting-started/#downloadHTML模板：<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- ...
Bootstrap 布局组件 1、Bootstrap字体图标 （1）、字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html （2）、用法 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。没有glyphicon的css。 <span class="glyphicon glyphicon-search"></span> （3）、定制字体图标 我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。 我们将以上面...
Bootstrap 提供了下列类型的表单布局： ?垂直表单（默认） -> 这个不好看，都是手机版了，PC版占一排不好看； ?内联表单 -> 我相信这个才是你想要的，PC版响应横排，手机版响应竖排。 ?水平表单 -> 用栅格系统控制显示一、垂直表单垂直表单使用的标准步骤 1.<form> 元素添加 role="form"。 2.把标签和控件放在一个带有"form-group"的<div> 中，获取最佳间距。 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加"form-contr...
Bootstrap提供了三种表单布局：垂直表单，内联表单和水平表单 创建垂直或基本表单： ?向父 <form> 元素添加 role="form"。 ?把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。 ?向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control内联表单： 内联表单中所有元素都向左对齐，标签并排，要创建内联表单，需要在form标签中加入class.form-inline水平表单:和其它两种表单...
Affix是BootStrap中的一个很有用的控件，他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域。一开始的时候，导航在页面中是普通的流式布局，占有文档中固定的位置，当页面滚动的时候，导航就自动变成了固定布局（fixed）,始终处于用户的视区，下面来说说他的用法。首先来看看他的实现原理。它是通过实时修改页面元素的class属性来实现的开始的时候应用affix的元素的class中会自动添加affxi-top属性当滚动条滚动以...
今天学习了bootsap，收获颇丰，这里分享一个小案例，具体的解释都在代码上，这样比较直观。 先看图例<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Bootstrap选项卡</title><!-- 引入Bootstrap的样式表 --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href=...