Table of contents:
- Bootstrap framework basics 1
- Bootstrap Framework Basics 2
- Basic example of bootstrap framework 1
Accessory Style
Button Style
<!--默认样式 large 大 lg small 小 sm xs xsmall 加小 -->
<input type="button" class="btn btn-default btn-lg" value="default(灰色)大型"/><br /><br />
<!--表示成功或正使用的按钮，绿色-->
<input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/><br /><br />
<!--表示提示信息,天蓝色-->
<input type="button" class="btn btn-info btn-xs" value="info(天蓝色)超小型"/><br /><br />
<!--提供视觉加重，深蓝色-->
<input type="button" class="btn btn-primary " value="primary(深蓝色) 默认大小"/><br /><br />
<!--警告 橙色-->
<input type="button" class="btn btn-warning" value="warning(黄色)"/><br /><br />
<!--危险,红色-->
<input type="button" class="btn btn-danger" value="danger(红色)"/><br /><br />
<!--看起来像链接一样-->
<input type="button" class="btn btn-link" value="link(链接)"/><br /><br />
navigation
<body>
</div>
<!--导航-->
<nav class="container">
<ul class="myNav ">
<li class="active">
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-home"></i> 首页
</a>
</li>
<li>
<a class="intercept" href="#">
<i class="glyphicon glyphicon-gift"></i> 通用英语
</a>
</li>
<li>
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-pencil"></i> 海外考试
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-globe"></i>青少英语
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-bishop"></i> 行业英语
</a>
</li>
<li class=" hidden-sm">
<a class="intercept" href="#" >
<i class="glyphicon glyphicon-shopping-cart"></i> 在线购买
</a>
</li>
<li class=" hidden-md hidden-sm">
<a class="intercept" href="#">
<i class="glyphicon glyphicon-user"></i> 全球师资
</a>
</li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 更多栏目
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">全球师资</a></li>
<li><a href="#">学员案例</a></li>
<li><a href="#">免费体验</a></li>
<li><a href="#">英语胶囊</a></li>
<li><a href="#">精彩动态</a></li>
</ul>
</li>
</ul>
</nav>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
modal box
<body>
<a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框</a>
<!--
作者：offline
时间：2019-09-23
描述：
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal"></button>
-->
<div id="mymodal" class="modal fade">
<div class="modal-dialog">
<!--模态 对话框-->
<div class="modal-content">
<!-- 模态框的内容边框、边距、背景色、阴影效果-->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button> ×⊗áϑ
</div>
</div>
</div>
</div>
</body>
picture shape
<body>
<div class="container">
<img src="image/1.jpg" class="img-responsive" alt=""/>
<!--
作者：offline
时间：2019-05-20
描述：图片的圆角
-->
<img src="image/2.jpg" class="img-rounded " alt=""/>
<!--
作者：offline
时间：2019-05-20
描述：circle 代表圆圈 圆形的图
-->
<img src="image/1.jpg" class="img-circle " alt=""/>
<!--
作者：offline
时间：2019-05-20
描述：相框的图
-->
<img src="image/1.jpg" class="img-thumbnail " alt=""/>
</div>
</body>
Drop-down menu
<body>
<!--
作者：offline
时间：2019-05-21
描述：
dropdown 代表下拉 open 打开
toggle 代表切换
-->
<div class="container">
<div class="dropdown open">
<!-- open控制菜单收缩展开 default默认的-->
<button class="btn btn-default" data-toggle="dropdown" >
<!--caret 代表的是 向下小三角-->
下拉列表 <span class="caret"></span>
</button>
<!--
作者：offline
时间：2019-05-21
描述：dropdown-menu 下拉菜单
active 活动
-->
<ul class="dropdown-menu">
<li><a href="#">张三</a></li>
<li class="active"><a href="#">里斯</a></li>
<!--divider
分界线-->
<li class="divider"></li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<!--
作者：offline
时间：2019-05-21
描述：dropup open 上拉
-->
<div class="dropup open"> <!-- open控制菜单收缩展开-->
<button class="btn btn-primary " data-toggle="dropdown" >
上拉 列表
<!-- 向下小三角-->
<span class="caret"></span>
</button>
<!--
作者：offline
时间：2019-05-21
描述：dropdown-menu 下拉列表
-->
<ul class="dropdown-menu">
<!-- active 默认是选中状态-->
<li class="active"><a href="#">者行者</a></li>
<li><a href="#">孙悟空</a></li>
<!-- divider分界线-->
<li class="divider"></li>
<li><a href="#">孙行者</a></li>
<li><a href="#">行者孙</a></li>
</ul>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
small icon
<body>
<!--
作者：offline
时间：2019-05-21
描述：小图标 glypyhicon 图标
class glyphicon-backward 后退 〈〈
glyphicon-home 回到首页
glyphicon-home(代表 家)
glyphicon-gift (代表礼物)
glyphicon-user(代表用户)
-->
<div class="container">
<div class="row text-center mylist">
<div class="col-md-3">
<span class="glyphicon glyphicon-home"></span>
<span class="text">首页</span>
</div>
<div class="col-md-3">
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="text">服务</span>
</div>
<div class="col-md-3">
<span class="glyphicon glyphicon-gift"></span>
<span class="text">商品</span>
</div>
<div class="col-md-3">
<span class="glyphicon glyphicon-user"></span>
<span class="text">我的联通</span>
</div>
</div>
</div>
</body>
