<!DOCTYPE html><html> <head> <title>Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js" ></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script> </head></html>注意引入的顺序
全局样式
BootStrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。
标题
class="h1~h6" <small>小标题</small>
<!DOCTYPE html><html> <head> <title>Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js" ></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script> </head> <body> <%--传统的方式--%> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <%--BootStrap提供的class样式--%> <span class="h1">标题1<small>小标题</small></span> <span class="h2">标题2</span> <span class="h3">标题3</span> <span class="h4">标题4</span> <span class="h5">标题5</span> <span class="h6">标题6</span> </body></html>
效果
文本段落
BootStrap中的P标签 默认文字大小：14px 行高：20px 底部外边距：10px 文本内容的对齐方式 class="text-left" class="text-center" class="text-right" 文本大小写转换 class="text-lowercase" class="text-uppercase" class="text-capitalize" 文本标记 <mark>使文字底部有黄线</mark> <del>删除线</del> <ins>下划线</ins> <strong>加粗加重</strong> <small>文本缩小显示</small>
<body> <p class="text-right"> 一袭白袍的陈平安“忘我”出拳，格外行云流水。<br> 不再是窑工学徒拉坯，处处古板匠气如楷书，已如大家风流之行书。<br> <small>其中精髓，唯有吃得住苦、抓得住福而已。</small> </p> <p class="text-center"> <mark>一袭白袍</mark>的陈平安<del>“忘我”</del>出拳，格外行云流水。<br> 不再是<ins>窑工学徒拉坯</ins>，处处古板匠气如楷书，已如大家风流之行书。<br> <strong>其中精髓，唯有吃得住苦、抓得住福而已。</strong> </p> <p class="text-left text-uppercase" > Accept what was and what is, and you’ll have more positive energy to pursue what will be. </p> </body>
效果
表格
<table class="table table-striped table-bordered table-hover text-center"> table：默认将表格样式铺满屏幕 table-striped：斑马线效果 table-bordered：表格边框 table-hover：鼠标经过变色 行样式 <tr class="danger"> <tr class="info"> <tr class="active"> <tr class="warning"> <tr class="success">
<!DOCTYPE html><html><head>
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>
<style type="text/css">
.table { width: 50%; margin: 0 auto; margin-top: 10px;
} </style></head><body><table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr>
<td>标题1</td>
<td>标题2</td>
<td>标题3</td>
<td>标题4</td>
<td>标题5</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="danger">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="info">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="active">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="warning">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="success">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
</tbody></table></body></html>
效果
表单
输入框 BootStrap主张将相同组的控件统一放到一个div中方便管理 提供了form-group <div class="form-group has-error"> <label class="control-label">用户名：</label> <input type="text" class="form-control input-sm" placeholder="用户名"></div>class="form-control input-sm input-lg" 可以作用在文本域，select form-control：输入框会编程圆角，有蓝色选中状态 input-sm：让输入框变得更大 input-lg：更小 让表单内容横向显示 <form class="form-inline"></form><label class="sr-only">：隐藏label
<body><form class="form-inline"> <div class="form-group has-error"> <label class="control-label">用户名：</label> <input type="text" class="form-control input-sm" placeholder="用户名"> </div> <div class="form-group"> <label class="sr-only">选项</label> <select class="form-control"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> </div> <div class="form-group"> <label>具体信息</label> <textarea class="form-control"></textarea> </div></form></body>
效果
Button<input type="button" class="btn btn-default active" value="DemoButton"> active：按钮激活 disabled：按钮禁用 btn-default：按钮默认样式 btn-info：信息按钮 btn-warning：警告按钮 btn-success：成功按钮 btn-danger：危险按钮 btn-link：链接按钮 <a class="btn btn-info">测试</a>
<form class="form-inline"> <input type="button" class="btn btn-default active" value="Default" style="margin: 10px 10px"> <input type="button" class="btn btn-info disabled" value="Info"> <input type="button" class="btn btn-warning" value="Warning"> <input type="button" class="btn btn-success" value="Success"> <input type="button" class="btn btn-danger " value="Danger"> <input type="button" class="btn btn-link" value="Link"> <a class="btn btn-info">测试</a></form>
效果
响应式设计
ViewPort
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo</title></head>width：控制 viewport 的大小，可以指定的一个值，如 600。 也可以指定特殊的值，如 device-width：设备的宽度。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次加载的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。
栅格布局
当屏幕到达预设宽度时，改变屏幕的显示
1.传统方式<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>
<style type="text/css">
.test { width: 300px; height: 200px; background: red;
}
当屏幕宽度小于900时显示
@media screen and (max-width: 900px) { .test { width: 100%; height: 100px; background: blue;
}
} </style></head><body>
<div class="test"></div></body>2. BootStrap<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>
<style type="text/css">
.test { height: 300px; background: red;
} </style></head><body>
<div class="test col-lg-3 col-sm-2"></div></body>col-lg-3：大屏的时候占三分之一
col-sm-2：小屏的时候占二分之一BootStrap组件
字体图标
BootStrap提供了许多字体图标用以使用<body> <button class="btn btn-info" style="margin: 10px 10px"> <span class="glyphicon glyphicon-star"></span> Info Button </button></body>
下拉菜单
<body> <div class="dropdown" style="margin: 10px 10px;"> <button class="btn btn-info" data-toggle="dropdown"> 下拉按钮 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a >百度</a> </li> <li> <a >Google</a> </li> </ul> </div></body>data-toggle="dropdown"：用来关联下拉列表
控件组
<body> <div class="input-group form-group" style="margin: 10px 10px;"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> </div></body>
导航
<body> <ul class="nav nav-tabs"> <li class="active"><a href="">导航1</a></li> <li><a href="">导航2</a></li> <li><a href="">导航3</a></li> </ul> <ul class="nav nav-pills" style="margin-top: 20px"> <li class="active"><a href="">导航1</a></li> <li><a href="">导航2</a></li> <li><a href="">导航3</a></li> </ul> <ul class="nav nav-pills nav-stacked" > <li class="active"><a href="">导航1</a></li> <li><a href="">导航2</a></li> <li><a href="">导航3</a></li> </ul></body><ul class="nav nav-tabs">：一般导航样式<ul class="nav nav-pills">：胶囊导航样式<ul class="nav nav-pills nav-stacked" >：垂直导航栏
分页
<body> <nav> <ul class="pagination"> <li class="active"> <a href="">1 </a> </li> <li> <a href="">2</a> </li> <li> <a href="">3</a> </li> </ul> </nav></body>
进度条
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>
<style type="text/css">
body{ margin: 10px;
} .progress{ width: 15%;
} </style></head><body>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped"
style="width: 60%">
60% </div>
</div></body>
列表
<body> <ul class="list-group"> <li class="list-group-item active"> Item1 <span class="badge">20</span> </li> <li class="list-group-item"> Item2 <span class="badge">17</span> </li> <li class="list-group-item"> Item3 <span class="badge">15</span> </li> </ul></body>
面板
<body> <div class="panel panel-default"> <div class="panel-heading"> 弹出层 </div> <div class="panel-body"> 内容 </div> <div class="panel-footer"> 脚注 </div> </div></body>
作者：云承寒
链接：https://www.jianshu.com/p/0eba25a1755f
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦