Bootstrap知识
- Bootatrap介绍：
- Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari - Bootstrap包含的e:css , 组件，js插件。
- 安装：
http://getbootstrap.com/- 当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构
- Bootstrap 源代码
- 当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0， maximum-scale=1.0, user-scalable=no""> //width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
<!-- 引入 Bootstrap --> //css样式
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]> //
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
国内推荐使用 Staticfile CDN 上的库：
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- Bootstrap CSS
- 响应式图片
<img src="..." class="img-responsive" alt="响应式图像"> - 容器
<div class="container">...</div> - 网格系统
.row 和 .col-xs-或 .col-xs-4 或col-md-4 或col-lg-4总和是12col-md-offset-3偏移 - 媒体查询
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min and (max-width: @screen-sm-max)) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min and (max-width: @screen-md-max)) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
- Bootstrap表格
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素（<tr>），用来标识表格列。
<tbody> 表格主体中的表格行的容器元素（<tr>）。
<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td> 默认的表格单元格。
<th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。
表格类
.table 为任意 <table> 添加基本样式 (只有横向分隔线) 尝试一下
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 尝试一下
.table-bordered 为所有表格的单元格添加边框 尝试一下
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态 尝试一下
.table-condensed 让表格更加紧凑
- Bootstrap表单
form
- 垂直或基本表单：
<form role="form">
把标签和控件放在一个带有class .form-group 的 <div>中。这是获取最佳间距所必需的
向所有的文本元素<input>、<textarea> 和 <select>添加class ="form-control" - 内联表单：
<form class="form-inline" role="form"> - 水平表单：
<form class="form-horizontal" role="form"> - 支持的表单控件
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select
- Boootstrap按钮
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击 尝
.disabled 禁用按钮
- Bootstrap图片
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
- Bootstrap响应式工具
超小屏幕 小屏幕 中等屏幕 大屏幕
手机 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
- Bootstrap布局组件
- Boootstrap字体图标
在下载的Boootstrap包中包含了字体图标
<span class="glyphicon glyphicon-search"></span>
参考查找: http://www.runoob.com/bootstrap/bootstrap-glyphicons.html - Bootstrap 下拉菜单（Dropdowns）
.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
- Bootstrap 按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">功能</a>
</li>
<li>
<a href="#">另一个功能</a>
</li>
<li>
<a href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
- Bootstrap 导航元素
以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
.nav nav-tabs 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
.disabled 禁用的标签页
标签添加下拉菜单
带下拉菜单的胶囊式标签页
.tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改
.tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
- Bootstrap 面包屑导航（Breadcrumbs）
是一个简单的带有 .breadcrumb class 的无序列表
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
- Bootstrap分页
分页（Pagination），是一种无序列表
.pagination 添加该 class 来在页面上显示分页 .disabled, .active 通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 .pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项 - Bootstrap标签
使用 class .label 来显示标签
.label label-default 默认的灰色标签
.label label-primary "primary" 类型的蓝色标签
.label label-success "success" 类型的绿色标签
.label label-info "info" 类型的浅蓝色标签
.label label-warning "warning" 类型的黄色标签
.label label-danger "danger" 类型的红色标签
- Bootstrap 徽章（Badges）
<a href="#">Mailbox <span class="badge">50</span></a> - Bootstrap 警告（Alerts）
并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger） - Bootstrap 进度条
添加一个带有 class .progress 的<div>。
接着，在上面的<div>内，添加一个带有 class .progress-bar 的空的<div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width: 60%”; 表示进度条在 60% 的位置
<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% 完成</span>
</div>
</div>
- Bootstrap 多媒体对象（Media Object）
如：图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排
<!-- 左对齐 -->
<div class="media">
<div class="media-left">
<img src="img_avatar1.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">RUNOOB</h4>
<p>这是一些示例文本...</p>
</div>
</div>
21. Bootstrap 列表组
向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。
22. Bootstrap 面板（Panels）
只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
- Bootstrap插件
- Bootstrap 模态框（Modal）插件
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
- Bootstrap 弹出框（Popover）插件
- Bootstrap 警告框（Alert）插件
- Bootstrap 折叠（Collapse）插件
- Bootstrap 轮播（Carousel）插件
扫一扫
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
