Bootstrap入门
来源：互联网 发布：淘宝 国外怎么用 编辑：程序博客网 时间：2024/06/11 00:44
Bootstrap
Bootstrap 简介
什么是bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。Internet Explorer Firefox Opera Google Chrome Safari容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。响应式设计它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。
Bootstrap使用
环境下载
下载 Bootstrap从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。导入时用
设置界面支持html5
<!DOCTYPE html><html>....</html>引入js/css文件
<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- 可选的Bootstrap主题文件（一般不使用） --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>本地文件导入方式（先将bootstrap文件复制到项目中）
<script type="text/javascript" src="../js/jquery-2.2.1.min.js"></script><!-- 包括所有已编译的插件 --><script type="text/javascript" src="../js/bootstrap.js"></script><link rel="stylesheet" href="../css/bootstrap.min.css"><link rel="stylesheet" href="../css/bootstrap-theme.min.css">移动端
文档位置
http://v3.bootcss.com案例入门，展示一个内边框的div
<div class="container"> <div class="jumbotron"> <h1>我的第一个 Bootstrap 页面</h1> <p>重置窗口大小，查看响应式效果！</p> </div></div> 案例效果
效果一 展示一个表格效果
<table class="table table-striped"> <thead> <tr> <th>Student-ID</th> <th>Last Name</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>Reddy</td> <td>A+</td> </tr> <tr> <td>002</td> <td>Pallod</td> <td>A</td> </tr> <tr> <td>003</td> <td>Sen</td> <td>A+</td> </tr> </tbody></table>案例效果，展示按钮
<!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button>栅格系统
<div class="container"> <div class="row"> <div class="col-xs-12 ">一共12列</div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> <div class="col-xs-1 ">1列</div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-4 ">占4列</div> <div class="col-xs-4 ">占4列</div> <div class="col-xs-4 ">占4列</div> </div> </div> 样式 div.container div.row div { margin: 5px 0px; } div.container div.row div { background-color: lightgray; border: 1px solid gray; text-align: center; }案例效果,导航栏
案例效果，轮播图
<div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="../img/bb.jpg" alt="First slide"> </div> <div class="item"> <img src="../img/aa.jpg" alt="Second slide"> </div> <div class="item"> <img src="../img/aa.jpg" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> 播动 $('.carousel').carousel();模态框
<!-- 模态框（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>SSM前后端分离项目
定义导航栏效果
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">员工管理系统</a></li> <li><a href="#" onclick="showUsers()">员工管理</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div></div>导航栏点击事件切换效果
$("li").click(function() { $.each($("li"), function() { $(this).prop("class", ""); }); $(this).prop("class", "active");});定义数据展示表格
<table id="tt" class="table table-striped"></table>数据展示
$.ajax({ type : "GET", url : "/Day10_EasyUI/getUser.action", dataType : "json", success : function(data) { var str = "<thead><tr><th>用户编号</th><th>用户名</th><th>邮箱</th><th>性别</th><th>操作</th></tr></thead>"; $.each(data,function(index) { str = str + "<tbody><tr><td>" + index + "</td><td>" + this.username + "</td><td>" + this.email + "</td><td>" + this.sex + "</td ><td><button type='button' class='btn btn-success' onclick='editUser(" + this.id + ")'>修改</button> </td></tr></tbody>" }); $("#tt").html(str); } });阅读全文
0 0
- BootStrap 入门
- Bootstrap入门
- bootstrap入门
- BootStrap入门
- bootstrap入门
- bootstrap入门
- BootStrap入门
- bootstrap 入门
- Bootstrap入门
- Bootstrap入门
- Bootstrap-入门
- Bootstrap入门
- Bootstrap 入门
- Bootstrap入门
- Bootstrap入门
- bootstrap入门
- bootstrap-入门
- bootstrap-入门
- 智能小车22：安装电压检测模块
- Spring的声明式事务
- 【python实战】3 决策树（代码讲解）
- Java操作XML的五种方式之DOM4J和 digester
- C++多线程——CreateThread
- Bootstrap入门
- Linux学习笔记
- 关于前两篇
- C#基础-026 九九乘法表
- javaee学习日记之java基础之Sql语句和MySql方言
- C++ Primer Notes（15）
- 用私有构造器或者枚举来强化Singleton属性
- C#基础-027 简单模拟赌博
- jQuery的7个同级选择器
