BootStrap入门教程
入门第一步 helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body{
padding-top: 50px;
}
.starter{
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="https://www.baidu.com" class="navbar-brand">项目名称</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="https://www.cnblogs.com/wanson">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="starter">
<h1>初学入门</h1>
<p class="lead">
there is no choice but to grow.
</p>
</div>
</div>
<body>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
入门第二步常见元素使用 排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
<body>
<div class="container">
<!-- small 可以用于副标题-->
<h1>好了歌<small>世人都晓神仙好</small></h1>
<p>sally was very amused.</p>
<!-- <abbr title="attribute">红楼梦</abbr> 缩略语 -->
<p><abbr title="attribute">红楼梦</abbr>:甄事隐和<mark>贾雨村</mark></p>
<!--class="lead"突出显示操作-->
<p class="lead">护官符</p>
<p class="text-left">贾不假，白玉为堂金作马。</p>
<p class="text-center">阿房宫，三百里，住不下金陵一个史。</p>
<p class="text-danger">东海缺少白玉床，龙王来请金陵王。</p>
<p class="text-right">丰年好大雪，真珠如土金如铁。</p>
<p class="text-capitalize">wanSon</p>
<p class="text-lowercase">wanSon</p>
<p class="text-uppercase">wanSon</p>
<address>
<strong>红楼梦</strong><br>
宁国府<br>
荣国府<br>
<abbr title="phone">p:1314 1688</abbr>
</address>
<!--列表-->
<ul class="list-unstyled">
<li>贾元春</li>
<li>贾迎春</li>
<li>贾探春</li>
<li>贾惜春</li>
</ul>
</div>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
入门第三步 栅格系统使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #2aabd2;
background-color: rgba(86, 61, 124, .15);
border: 2px solid red;
border: 2px solid rgba(86, 61, 124, .2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1">贾元春</div>
<div class="col-lg-1">贾迎春</div>
<div class="col-lg-1">贾探春</div>
<div class="col-lg-1">贾惜春</div>
<div class="col-lg-1">林黛玉</div>
<div class="col-lg-1">薛宝钗</div>
<div class="col-lg-1">史湘云</div>
<div class="col-lg-1">妙玉</div>
<div class="col-lg-1">王熙凤</div>
<div class="col-lg-1">巧姐</div>
<div class="col-lg-1">李纨</div>
<div class="col-lg-1">秦可卿</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">贾元春</div>
<div class="col-lg-3">贾迎春</div>
<div class="col-lg-3">贾探春</div>
<div class="col-lg-3">贾惜春</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-2">贾敏</div>
</div>
</div>
<!--嵌套-->
<div class="container">
<div class="row">
<!-- col-lg-offset-4 栅格偏移量-->
<div class="col-md-4 col-lg-offset-4">林家大院</div>
</div>
<div class="row">
<div class="col-sm-9">
林黛玉
<div class="row">
<div class="col-xs-8">
林如海
</div>
<div class="col-xs-4">
贾敏
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">宁国府</div>
<div class="col-lg-6">荣国府</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9">刘姥姥</div>
<div class="col-lg-3">贾母</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9 col-lg-push-3">刘姥姥</div>
<div class="col-lg-3 col-lg-pull-9">贾母</div>
</div>
</div>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
第四步bootstrap 之 "代码"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
for example <code>section</code> as inline
<br>
<br>
<br>
for example <code><section></code> as inline
<br><br><br>
<!-- 显示 命令 的助记符-->
我希望现在能输入<kbd>cmd</kbd>命令
<br><br><br>
<!--代码段 助记符-->
<pre>
#include <stdio.h>
int main()
{
return 0;
}
</pre>
<br><br><br>
<!--数学变量-->
<var>x</var>=<var>y</var>+<var>z</var>
<br><br><br>
<!-- 程序结果输出-->
<samp>hello world</samp>
</div>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
第五步 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 斑马线 带边框 带悬停模式-->
<!-- <table class="table table-striped table-bordered table-hover">-->
<table class="table table-condensed table-hover">
<thead>
<tr class="active">
<th>贾府</th>
<th>王府</th>
<th>薛府</th>
<th>史府</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>贾元春</td>
<td>贾迎春</td>
<td>贾探春</td>
<td>贾惜春</td>
</tr>
<tr class="info">
<td>林黛玉</td>
<td>薛宝钗</td>
<td>史湘云</td>
<td>妙玉</td>
</tr>
<tr class="warning">
<td>王熙凤</td>
<td>巧姐</td>
<td>李纨</td>
<td>秦可卿</td>
</tr>
<tr class="danger">
<td>西游记</td>
<td>红楼梦</td>
<td>三国演义</td>
<td>水浒传</td>
</tr>
</tbody>
</table>
</div>
<br><br><br>
<div class="table-responsive">
<!-- 斑马线 带边框 带悬停模式-->
<!-- <table class="table table-striped table-bordered table-hover">-->
<table class="table table-bordered table-hover">
<thead>
<tr class="active">
<th>贾府:贾不假，白玉为堂金作马;阿房宫，三百里，住不下金陵一个史。</th>
<th>王府</th>
<th>薛府</th>
<th>史府</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>贾元春</td>
<td>贾迎春</td>
<td>贾探春</td>
<td>贾惜春</td>
</tr>
<tr class="info">
<td>林黛玉</td>
<td>薛宝钗</td>
<td>史湘云</td>
<td>妙玉</td>
</tr>
<tr class="warning">
<td>王熙凤</td>
<td>巧姐</td>
<td>李纨</td>
<td>秦可卿</td>
</tr>
<tr class="danger">
<td>西游记</td>
<td>红楼梦</td>
<td>三国演义</td>
<td>水浒传</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
第六步表单样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!--表单实战-->
<form action="" class="form">
<div class="form-group">
<label for="">用户名</label>
<input type="text" class="form-control" placeholder="输入用户名">
<label>密码</label>
<input type="password" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="">日期</label>
<input type="date" class="form-control" placeholder="选择日期">
<label for="">email</label>
<input type="email" class="form-control" placeholder="输入电子邮箱">
</div>
<!--文件上传-->
<div class="form-group">
<label for="">选择文件</label>
<input type="file">
<p class="help-block">选择你需要上传的文件
</p>
</div>
</form>
<br><br><br>
<form action="" class="form-inline">
<div class="form-group">
<!-- 隐藏label 标签 class="sr-only"-->
<label for="" class="sr-only">用户名</label>
<input type="text" class="form-control" placeholder="输入用户名">
<label class="sr-only">密码</label>
<input type="password" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="" class="sr-only">日期</label>
<input type="date" class="form-control" placeholder="选择日期">
<label for="" class="sr-only">email</label>
<input type="email" class="form-control" placeholder="输入电子邮箱">
</div>
<!--文件上传-->
<div class="form-group">
<!-- 隐藏label 标签 class="sr-only"-->
<label for="" class="sr-only">选择文件</label>
<input type="file">
<p class="help-block">选择你需要上传的文件
</p>
</div>
</form>
<br>
<br>
<br>
<!--表单水平操作-->
<h1 class="text-center">水平操作处女版</h1>
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="">邮箱</label>
<input type="email" placeholder="输入邮箱">
</div>
<div class="form-group">
<label for="">密码</label>
<input type="password" placeholder="密码">
</div>
</form>
<h1 class="text-center">水平操作改进版</h1>
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="" class="col-lg-2 control-label">邮箱</label>
<!-- 输入框变成圆角输入框 设置 class="form-control" -->
<div class="col-lg-10">
<input type="email" class="form-control" placeholder="输入邮箱">
</div>
</div>
<div class="form-group">
<label for="" class="col-lg-2 control-label">密码</label>
<div class="col-lg-10">
<input type="password" class="form-control" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-info">
登陆
</button>
</div>
</div>
<br>
<br>
<br>
</form>
<!--文本域操作-->
<h1 class="text-center">文本域实战</h1>
<form action="" role="form">
<input type="text" class="form-control">
<textarea class="form-control" rows="10">请文明用语</textarea>
<br>
<br>
<br>
<h1 class="text-center">复选的效果</h1>
<div class="checkbox">
<label for="">
<input type="checkbox" value="">宁国府
</label>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" value="">荣国府
</label>
</div>
<br><br><br>
<h1 class="text-center">单选效果</h1>
<!-- 注意name 名字要一致 -->
<div class="radio">
<label for="">
<input name="optionsRadios" type="radio" checked>男
</label>
</div>
<div class="radio">
<label for="">
<input name="optionsRadios" type="radio" checked>女
</label>
</div>
<br><br><br>
<h1 class="text-center">下拉列表</h1>
<select name="" id="" class="form-control">
<option value="">贾不假，白玉为堂金作马</option>
<option value="">阿房宫，三百里，住不下金陵一个史</option>
<option value="">东海缺少白玉床，龙王来请金陵王</option>
<option value="">丰年好大雪，珍珠如土金如铁</option>
</select>
<br><br><br>
<select multiple name="" id="" class="form-control">
<option value="">贾不假，白玉为堂金作马</option>
<option value="">阿房宫，三百里，住不下金陵一个史</option>
<option value="">东海缺少白玉床，龙王来请金陵王</option>
<option value="">丰年好大雪，珍珠如土金如铁</option>
</select>
<br><br><br>
<p class="form-control-static">算命请输入:农历年-月-日-时</p>
<input type="text" class="form-control" placeholder="禁止通行" disabled>
</form>
<br><br><br>
<h1 class="text-center">禁用设置</h1>
<form action="" class="form">
<fieldset disabled>
<form action="" role="form">
<input type="text" class="form-control">
<textarea class="form-control" rows="10">请文明用语</textarea>
<br>
<br>
<br>
<div class="checkbox">
<label for="">
<input type="checkbox" value="">宁国府
</label>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" value="">荣国府
</label>
</div>
<br><br><br>
<!-- 注意name 名字要一致 -->
<div class="radio">
<label for="">
<input name="optionsRadios" type="radio" checked>男
</label>
</div>
<div class="radio">
<label for="">
<input name="optionsRadios" type="radio" checked>女
</label>
</div>
<br><br><br>
<select name="" id="" class="form-control">
<option value="">贾不假，白玉为堂金作马</option>
<option value="">阿房宫，三百里，住不下金陵一个史</option>
<option value="">东海缺少白玉床，龙王来请金陵王</option>
<option value="">丰年好大雪，珍珠如土金如铁</option>
</select>
<br><br><br>
<select multiple name="" id="" class="form-control">
<option value="">贾不假，白玉为堂金作马</option>
<option value="">阿房宫，三百里，住不下金陵一个史</option>
<option value="">东海缺少白玉床，龙王来请金陵王</option>
<option value="">丰年好大雪，珍珠如土金如铁</option>
</select>
<br><br><br>
<p class="form-control-static">算命请输入:农历年-月-日-时</p>
<input type="text" class="form-control" placeholder="禁止通行" disabled>
</form>
</fieldset>
</form>
<br><br><br>
<form action="" role="form">
<div class="form-group has-success has-feedback">
<label>用户名</label>
<input class="form-control" type="text">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning">
<label>用户名</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>用户名</label>
<input class="form-control" type="text">
</div>
</form>
<br><br><br>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
第七步 按钮和图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>UoS</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center">按钮实战</h1>
<div class="container">
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-link">link</button>
<button type="button" class="btn btn-danger">danger</button>
</div>
<div class="div">
<button type="button" class="btn btn-info btn-lg">info</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-info btn-sm">info</button>
<button type="button" class="btn btn-info btn-xs">info</button>
</div>
<div class="container">
<button type="button" class="btn btn-default btn-block">default</button>
</div>
<br>
<br>
<!--a标签使用概率比较高 这个使用方法记住-->
<div class="container">
<a href="#"class="btn btn-default btn-lg active" role="button">薛宝钗</a>
</div>
<br><br><br>
<!--禁用设置-->
<div class="container">
<button type="button" class="btn btn-default btn-block" disabled="disabled">default</button>
</div>
<br>
<br>
<!--a标签使用概率比较高 这个使用方法记住-->
<div class="container">
<a href="#"class="btn btn-default btn-lg active" role="button" disabled="disabled">薛宝钗</a>
</div>
<br><br><br>
<div class="container">
<input type="button" class="btn btn-default" value="input">
</div>
<br><br><br>
<h1 class="text-center">图片</h1>
<div class="container">
<img src="http://n.sinaimg.cn/sinacn17/695/w616h879/20180916/1500-hkahyhx8007764.jpg" alt="" class="img-circle">
<img src="http://n.sinaimg.cn/sinacn17/695/w616h879/20180916/1500-hkahyhx8007764.jpg" alt="" class="img-rounded">
<img src="http://n.sinaimg.cn/sinacn17/695/w616h879/20180916/1500-hkahyhx8007764.jpg" alt="" class="img-thumbnail">
</div>
<br><br><br>
<br><br><br>
<br><br><br>
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
posted on 2020-03-25 08:58 Indian_Mysore 阅读(134) 评论(4) 收藏 举报
浙公网安备 33010602011771号