一、入门
BootStrap简介
BootStrap 是Twitter的工程师开发的前端框架,可以非常方便的设计出好看的页面效果。
本章演示一些基本元素 使用 Bootstrap和不用的区别
1、使用BootStrap和不用的区别
演示按钮 输入框 下拉框等常见的组件,在原生html和Bootstrap的效果比较
同时还演示了几种html中没有的效果
2、BootStrap如何使用
使用方法, 四个步骤 |
步骤1 <!DOCTYPE html> |
因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上
<!DOCTYPE html> 代码比较复制代码
|
步骤2 导入js和css |
Bootstrap需要JQuery才能正常工作,所以需要导入jquery.min.js 接着是 Bootstrap的css,里面定义了各种样式 最后是 Bootstrap的js,用于产生交互效果,比如关闭警告框 注:顺序不要搞错了,否则有一些效果会出不来。 首先是JQuery 然后是Bootstrap css 最后是Bootstrap js <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> |
步骤3 套用class |
接着就是出现BootStrap的效果,使用是非常简单的,只需要套用 bootstrap css中定义的class即可。 如按钮,增加class btn btn-success 就能有bootstrap的效果了 <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button class="btn btn-success">按钮</button> |
步骤4 本地测试 |
首先在右侧下载bootstrap.rar 解压后和html放在同一个目录下 js和css的引用也如图所示 |
二、基本样式
BootStrap按钮 按钮样式 可以用于 按钮元素<button> 超链元素<a> 按钮类型的input元素 <input type="button"> 提交类型的input元素 <input type="submit"> 重置类型的input元素 <input type="reset"> |
按钮样式很多,只需要改变class的btn值即可 <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn">原始样式按钮</button> |
BootStrap表格 示例 1 : 基本表格 示例 2 : 带斑马线的表格 示例 3 : 带边框的表格 示例 4 : 有鼠标悬停状态的表格 示例 5 : 更加紧凑的表格 示例 6 : 多种表格效果整合在一起 示例 7 : 激活样式 示例 8 : 成功样式 示例 9 : 信息样式 示例 10 : 警告样式 示例 11 : 危险样式 |
按钮样式很多,只需要改变class的table值即可 <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <table class="table table-hover"> <thead> <th>头像</th> <th>名字</th> <th>HP</th> </thead> <tbody> <tr> <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/gareen.png"/></td> <td>盖伦</td> <td>616</td> </tr> <tr> <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/teemo.png"/></td> <td>提莫</td> <td>383</td> </tr> <tr> <td><img width="20px" src="https://how2j.cn/study/bootstrap/lol/akali.png"/></td> <td>阿卡丽</td> <td>448</td> </tr> </tbody> </table> |
图片 示例 1 : 圆角 示例 2 : 圆形 示例 3 : 缩略图 |
按钮样式很多,只需要改变class的img值样式即可 <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <img src="https://how2j.cn/example.gif" class="img-rounded"> |
表单 对输入元素使用form-control 可以去除阴影,边框附带淡蓝色,输入状态更加柔和 |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <input type="text" class="form-control" value="文本框"> <br> <input type="password" class="form-control" value="password"> <br> <textarea class="form-control">文本域</textarea> <br> <select class="form-control"> <option>Java</option> <option>Html</option> <option>IOS</option> </select> |
BootStrap文本 示例 1 : 淡灰色文本 示例 2 : 强调的文本 示例 3 : 操作成功文本 示例 4 : 提示信息文本 示例 5 : 警告文本 示例 6 : 危险操作文本 |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <span class="text-muted">muted</span>//淡灰色文本 |
BootStrap背景 示例 1 : 强调的背景 示例 2 : 成功操作文字的背景 示例 3 : 信息提示文字的背景 示例 4 : 警告提示文字的背景 示例 5 : 危险提示文字的背景 |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <p class="bg-primary">强调</p> |
BootStrap其他 示例 1 : 关闭按钮 示例 2 : 下拉菜单的按钮 示例 3 : 左浮动 示例 4 : 右浮动 示例 5 : 显示 示例 6 : 隐藏 示例 7 : 隐藏 |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="close" aria-hidden="true"> × </button> |
BootStrap 删格布局 步骤 1 : 栅格系统 步骤 2 : 一半,1/3, 1/4 步骤 3 : 自动换行 |
1、栅格系统 运用Bootstrap的栅格系统,可以做出像table那样定义多少行,多少列效果,但是又比table灵活。 运用Bootstrap的栅格系统,首选需要准备一个class=container的div 紧接着需要一个class=row的 div,表示行 再挨着的div,就是列了。
Bootstrap的栅格系统会默认把一行,分成12列。进而设置列col-xs-值就可以了,超过12就会自动换行 <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <style> div.container div.row div {
margin:5px 0px; } div.container div.row div {
background-color: lightgray; border: 1px solid gray; text-align:center; } </style> <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> |
三、组件
BootStrap字体图标 Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求
为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 示例 1 : 一个字体图标 使用class: glyphicon glyphicon-asterisk 示例 2 : 字体图标设置颜色 加一个文本类 text-success 示例 3 : 字体图标上加超链 在span外面套一个a标签 <a href="#nowhere"> <span class="glyphicon glyphicon-asterisk"></span> 连接 </a> 示例 4 : 在button上使用字体图标 在span外面套一个button标签 <button class="btn btn-primary btn"> <span class="glyphicon glyphicon-asterisk"></span> 按钮 </button> 示例 5 : 所有的字体图标 |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <span class="glyphicon glyphicon-asterisk text-success" ></span> <!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-asterisk">最小按钮</span> </button> <button class="btn btn-primary btn"> <span class="glyphicon glyphicon-asterisk"></span> 按钮 </button> 所有的字体图标 |
BootStrap下拉菜单 示例 1 : 下拉菜单 菜单div <div class="dropdown"> 下拉按钮,id用来给下拉菜单指向用的 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 菜单列表,aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单,因为有可能有多个菜单 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 菜单项 <li><a href="#">HTML</a></li> 示例 2 : 标题不可点击 标题不可点击 <li role="presentation" class="dropdown-header">Dropdown header</li> 示例 3 : 分割线 菜单分割线 <li role="presentation" class="divider"></li> 示例 4 : 禁用项 禁用的菜单项 <li role="presentation"class="disabled"> <a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a> </li> |
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div> |
BootStrap 按钮组 示例 1 : 按钮组 <div class="btn-group" role="group" |