WEB前端@BootStrap3
关注
分享
扫一扫
文章平均质量分 68
schy_hqh
这个作者很懒，什么都没留下…
展开
-
bootstrap3-导航条，旋转木马，网格
准备工作：下载bootstrap-3.0.0新建HTML5页面引入bootstrap最基础的css文件引入jquery（在引入其他js之前，先引入jquery）引入bootstrap的js文件自定义一个custom.css文件，用来对bootstrap的某些样式进行重写其它：支持移动设备的不同屏幕大小，提供响应式布局等。。。 主页 <!DOC...原创 2013-12-24 17:34:56 · 486 阅读 · 0 评论 -
bootstrap3-pagination 分页
<!-- 分页 --> <div class="container"> <ul class="pagination pagination-sm"> <li><a href="#">&laquo;</a></li&原创 2013-12-27 10:58:51 · 378 阅读 · 0 评论 -
bootstrap3-listGroup 列表
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Default buttons from Bootstrap 3</title><meta name="viewport" content=&原创 2013-12-27 10:59:10 · 263 阅读 · 0 评论 -
bootstrap3-警告框
警告框分2种：静态警告框动态警告框（依赖jquery插件） 需引入bootstrap下的alert.js到页面中。 静态弹出框<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="t原创 2013-12-27 10:59:26 · 266 阅读 · 0 评论 -
bootstrap3-Modal 模态窗口
模态窗口的使用：1.触发窗口打开2.窗口打开后是否可以继续操作页面上的内容3.关闭窗口 有2种方式来触发模态窗口的显示通过data属性<!-- Button trigger modal 模态框的触发按钮,通过data-toggle="modal" data-target="#myModal"实现与模态框的绑定--><button c...原创 2013-12-28 12:22:49 · 654 阅读 · 0 评论 -
bootstrap3-popover 提示框
提示内容的方向top | bottom | left | right | auto. 4种触发方式click | hover | focus | manual点击|漂过|焦点|手动 应用data属性data-placement="right" 手动初始化popover功能（bootstrap基于性能考虑，没有主动开启此功能）$(function...原创 2013-12-28 12:23:29 · 417 阅读 · 0 评论 -
bootstrap3-typeahead 自动补全
之前做的自动补全是用的jquery的autocomplete，今天发现一个很酷的自动补全插件！ 很酷的一个自动补全插件http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件，完成自动补全 数据源：Local：数组prefectch：jsonremote等方式 <!...原创 2013-12-28 12:23:52 · 279 阅读 · 0 评论 -
bootstrap3-collapse 折叠
几个关键的属性 .collapse 用法class="collapse" 该元素被折叠 .collapse.in 用法class="collapse in" 展开该元素 data-parent="#selector" 保证parent下只有1个元素处于展开状态这个属性的作用：展开当前元素时，折叠其它暂开的元素，实现parent下只有1个元素处于展开状态如果不...原创 2013-12-28 12:24:04 · 821 阅读 · 0 评论 -
bootstrap3-button 按钮
具有加载效果的按钮照着bootstrap网站上的例子写，怎么都没反应只能想别的办法来实现这个效果了 <!-- 具有加载效果的按钮 --> <button type="button" id="fat-btn" class="btn btn-primary">Hello</button><script src=&quo原创 2013-12-28 12:24:16 · 316 阅读 · 0 评论 -
bootstrap3-progress bar 进度条
动态效果的进度条 <!-- striped条纹 active运动效果 --> <!-- 默认 --> <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" style="width原创 2013-12-27 10:58:32 · 190 阅读 · 0 评论 -
bootstrap3-thumbnails 缩略图
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet&quo原创 2013-12-27 10:58:01 · 317 阅读 · 0 评论 -
bootstrap3-label&badge 标签和标号
标签-label<span class="label label-success">Success</span> 标号-badge<span class="badge">1</span>原创 2013-12-26 00:11:47 · 466 阅读 · 0 评论 -
bootstrap3-Grid System 网格系统
以下是bootstrap2.x中网格的说明，bootstrap3.0版本有不同的地方。只是为了理解bootstrap网格基本概念。 Explaining it in a simple way, in web design, we create rows and columns using HTML and CSS to achieve a grid. And columns con...原创 2013-12-25 10:09:50 · 139 阅读 · 0 评论 -
bootstrap3-Glyphicons 图标
Font Icons are becoming more and more popular because of a number of benefits. 在网页中使用字体图标，既形象又好看。 图标查询地址：http://www.w3resource.com/twitter-bootstrap/3/glyph-customization.html <!DO...原创 2013-12-25 10:41:52 · 219 阅读 · 0 评论 -
bootstrap3-Tables 表格
1原创 2013-12-25 11:24:53 · 110 阅读 · 0 评论 -
bootstrap3-Form 表单
使用bootstrap创建Form表单Twitter Bootstrap has styles for form controls like input, textarea, and select, it has support for lists and checkbox, has styles for disabled form controls and has included st...原创 2013-12-25 11:25:26 · 519 阅读 · 0 评论 -
bootstrap3-Button 按钮
Buttons are used widely in any website or app.按钮在web应用中使用非常的广泛。 按钮类别（不同颜色传递不同信息）<!DOCTYPE html><html><head><title>Default buttons from Bootstrap 3</titl...原创 2013-12-26 00:10:39 · 278 阅读 · 0 评论 -
bootstrap3-Image 图片
Bootstrap内部对图片样式的默认设置img { border: 0;/*This removes any border when images are rendered.*/ page-break-inside: avoid;/*avoids page breaks inside images.*/ max-width: 100% !important;/*make...原创 2013-12-26 00:10:54 · 256 阅读 · 0 评论 -
bootstrap3-标签页 nav, tabs and pills
basic tab based Navigation basic pills based Navigation <div class="container"> <div class="row"> <!-- 横向TAB导航 --> <div class="col-lg-6">原创 2013-12-26 00:11:18 · 554 阅读 · 0 评论 -
bootstrap3-navbar 导航条
更换背景颜色：.navbar { background-color: #febf04;} <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Twitter Bootstrap Basic Tab Bas原创 2013-12-26 00:11:35 · 368 阅读 · 0 评论 -
bootstrap2 多级菜单
http://getbootstrap.com/2.3.2/components.html#dropdowns <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width...原创 2014-02-07 23:21:51 · 178 阅读 · 0 评论