Bootstrap
关注
分享
扫一扫
刘小妞
遇见更好的自己---前端小白的成长历程，学的越多，发现自己越无知
展开
-
Bootstrap基础---网格系统
看到Bootstrap 可视化布局之后，感觉还是很震撼的，之前的代码都是自己一点点写，现在拖动一下就出来了效果，所以决定尝试一下。今后会持续更新自己学的笔记。 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 1.Bootstrap引入<!DOCTYPE html><html><head>原创 2016-06-01 20:26:22 · 598 阅读 · 0 评论 -
Bootstrap缩略图thumbnail
1.创建缩略图的步骤在图像周围添加带有class.thumbnail的<a>标签这会添加四个像素的内边距和一个灰色的边框当鼠标悬停在图像上时，会动画显示出图像的轮廓2.默认样式的缩略图 <div > <a href="#" class="thumbnail"> <img src="../images/1.jpg" alt="通用的占位符缩略图">原创 2016-06-12 21:59:29 · 7554 阅读 · 0 评论 -
Bootstrap警告
1.警告（alert）向用户提供了一种定义消息样式的方式 <div class="alert alert-success">成功！</div><div class="alert alert-info">信息！</div><div class="alert alert-warning">警告！</div><div class="alert alert-danger">错误！</div>2.可取原创 2016-06-12 22:05:02 · 3756 阅读 · 0 评论 -
Bootstrap进度条
Bootstrap进度条使用css3过渡和动画来获得效果。 1.创建一个进度条的步骤添加一个带有.progress的<div>在上面的<div>内，添加一个带有class.progress-bar的空的<div>添加一个带有百分比表示的宽度style属性，例如style="60%",表示进度条在60%的位置2.基本的进度条 <div class="progress"> <div cla原创 2016-06-13 09:23:07 · 431 阅读 · 0 评论 -
Bootstrap多媒体对象
1..media 允许将媒体对象里的多媒体（图像，视频，音频）浮动到内容块的左边或者右边.media-list:各项内容是武学列表的一部分，可以使用该class。用于评论列表和文章列表<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="../images/1.jpg"原创 2016-06-13 09:50:11 · 946 阅读 · 0 评论 -
Bootstrap面板
1.面板组件用于把DOM组件插入到一个盒子中，创建一个基本面板，只需要添加.panel和panel-default两个类既可。//基本的面板<div class="panel panel-default"> <div class="panel-body">基本的面板</div></div>2.面板标题 使用.panel-heading可以很简单的向面板添加标题容器。使用.panel-t原创 2016-06-13 10:18:11 · 687 阅读 · 0 评论 -
Bootstrap插件预览
Bootstrap自带12种jQuery插件，可以给站点添加更多的互动。 站点引用Bootstrap插件的方式有两种 1.单独引用：使用个别的.js文件，一些插件和css组件依赖其他的插件。如果单独引用插件，请先确保这些插件之间的依赖关系。 2.编译引用:使用bootstrap.js或压缩版的bootstrap.min.js都包含了所有的插件 所有的插件依赖于jQuery，所以必须在插件文件原创 2016-06-13 10:44:09 · 2913 阅读 · 0 评论 -
Bootstrap模态框插件
1.基本模态框 模态框（Model）是覆盖在父窗体上的子窗体，通常是显示一个单独的源的内容。 用法：切换模态框插件隐藏内容1.通过data属性：在控制器元素上设置属性data-toggle="modal",同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框2.通过javascript：$('identifier').mod原创 2016-06-13 15:03:33 · 894 阅读 · 0 评论 -
Bootstrap下拉菜单插件
1.用法 (1)通过data属性，向链接或按钮添加data-toggle=”dropdown”来切换下拉菜单 如果需要保持链接完整（在浏览器不启用JavaScript时有用），使用data-target属性代替href=”#” (2)通过JavaScript调用下拉菜单切换$('.dropdown-toggle').dropdown()效果图： <ul class="nav nav-tabs原创 2016-06-13 15:22:47 · 1240 阅读 · 0 评论 -
Bootstrap滚动监听插件
滚动监听插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本实现是随着滚动，基于滚动条的位置向导航栏添加.active。 1.用法 （1）通过data属性，向您想要监听的元素添加data-spy=“scroll” （2）通过JavaScript，调用.scrollspy()函数$('body').scrollspy({target:'.navbar-example'})2原创 2016-06-13 16:51:19 · 1243 阅读 · 0 评论 -
Bootstrap超大屏幕和页面标题
Bootstrap支持超大屏幕（jumbotron）,它可以增加标题的大小，并为登陆页面内容添加更多的外边距创建一个带有class.jumbotron的容器除了更大的<h1>,字体的粗细font-weight被减为200px<div class="jumbotron"><h1>欢迎页面</h1><p><a class="btn btn-primary btn-lg" role="button"原创 2016-06-12 21:16:47 · 1725 阅读 · 0 评论 -
Bootstrap分页,标签和微章
分页（Pagination）,是一种无序列表。.pagination:在页面上显示分页.disabled,.active:通过.disabled来定义不可点击的链接，.active来指示当前的页面.pagination-lg,.pagination-sm:获取不同大小的项1.默认的分页 <ul class="pagination"><li><a href="#">«</a></l原创 2016-06-12 20:56:11 · 608 阅读 · 0 评论 -
Bootstrap表格
1.表格的元素<thead> 表格标题行<tbody> 表格主体<tr>行<td> 表格的列<th> 特殊的表格单元格，必须在<thead>内使用<caption> 表格存储内容的描述或总结2.表格类.table 为任意表格添加基本样式，只有横向分割线.table-striped 在<tbody>内添加斑马线形式的条纹.table-bordered 为所有表格的单元格添加边框.tab原创 2016-06-06 22:11:11 · 755 阅读 · 0 评论 -
Bootstrap--排版
1.标题 Bootstrap中定义了所有的标题 2.内联子标题 如果需要添加内联子标题，只需要简单的在元素两旁添加<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 3.引导主体副本 为了给段落添加强调文本，则可以添加class=”lead”,这将得到更大更粗行更高的文本<p class="lead">引导主体副本</p>4.强调<small>设置文本为父原创 2016-06-01 21:27:55 · 524 阅读 · 0 评论 -
Bootstrap表单
1.表单的布局 垂直表单（默认），内联表单，水平表单 2.创建基本表单的步骤向父<form>元素添加role="form"把标签和控件放在一个带有class.form-group的<div>中。这是获取最佳间距所必需的向所有的文本元素<input> <textarea>和<select>添加class.form-control<form role="form"> <div class原创 2016-06-06 22:32:59 · 727 阅读 · 0 评论 -
Bootstrap按钮
任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。.btn 为按钮添加基本的样式.btn-default 默认/标准按钮.btn-primary 原始按钮的样式（未被操作）.btn-success表示成功的动作.btn-info 该样式用于要弹出信息的按钮.btn-warning 表示需要谨慎操作的啊你.btn-danger 表示一个危险动作的按钮.btn-link 按钮原创 2016-06-08 22:33:15 · 437 阅读 · 0 评论 -
Bootstrap图片
1.Bootstrap提供了三个可对图片应用简单样式的class.img-rounded:添加border-radius:6px来获得图片圆角，为图片添加圆角.img-circle:添加border-radius:50%来让整图片变成圆形.img-thumbnail:添加一些内边距（padding）和一个灰色的边框（缩略图功能）<img src="/wp-content/uploads/2014原创 2016-06-12 08:49:12 · 1210 阅读 · 0 评论 -
Bootstrap辅助类
1.文本.text-muted:文字的颜色换成灰色.text-primary:文字的颜色变成蓝色.text-success:文字的颜色变成绿色.text-info:文字的颜色变成暗蓝色.text-warning:文字颜色变成暗黄色.text-danger：文字的颜色变成红色2.背景.bg-primary:背景变为蓝色.bg-success:背景为浅绿色.bg-info:背景为浅蓝色原创 2016-06-12 09:59:56 · 627 阅读 · 0 评论 -
Bootstrap字体图标
1.若要使用图标，直接引入//显示一个放大镜的查找图标<span class="glyphicon glyphicon-search"></span>//显示uesr的大按钮<button type="button" class="btn btn-default btn-lg">//标准默认的按钮，大按钮 <span class="glyphicon glyphicon-user"></sp原创 2016-06-12 10:37:42 · 1778 阅读 · 0 评论 -
Bootstrap下拉菜单（Dropdowns）和按钮
1.下拉菜单<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 主题 <span class="caret"></span>//设置向下的小三角 </button>原创 2016-06-12 11:14:07 · 3962 阅读 · 2 评论 -
Bootstrap输入框组
向.form-control添加前缀或后缀元素的步骤如下：（1）把前缀或后缀元素放在一个带有class.input-group的<div>中（2）在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容（3）把<span>放置在<input>元素的前面或者后面1.基本输入框组//邮箱输入框组，不用输入@ 和 .com<div class="inpu原创 2016-06-12 14:44:58 · 1079 阅读 · 0 评论 -
Bootstrap导航栏
1.表格导航或标签： 创建一个标签式的导航菜单 以一个带有class.nav的无序列表开始添加class.nav-tabs<ul class="nav nav-tabs">//添加两个类 <li class="active"><a href="#">Home</a></li>//设置首页的选项处于选中状态 <li><a href="#">HTML</a></li>//鼠标经过时，背原创 2016-06-12 18:47:29 · 4832 阅读 · 1 评论 -
Bootstrap标签页插件
1.用法 通过data属性，添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中<ul class="nav nav-tabs"> <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>通过javascript启用$('#myTab a').click(function (e原创 2016-06-13 17:14:20 · 893 阅读 · 0 评论