Bootstrap入门
2018-09-25 本文已影响0人
ticktackdong
一.使用事项
1.<!DOCTYPE html>
2.<script src="jquery.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
二.基本样式
按钮
<button> <a> <input type="button"> <input type="submit"> <input type="reset">
btn btn-default/btn-info/btn-success/btn-danger/btn-primary/btn-warning
btn-link/btn-lg/btn-sm/btn-xs/btn-block/active/disabled
表格
table table-striped/table-bordered/table-condensed/table-hover
active/info/warning/danger
图片
img-rounded/img-circle/img-thumbnail
表单:去除阴影，边框附带淡蓝色，输入状态更柔和
<input type="text" class="form-control">
<input type="password" class="form-control">
<textarea class="form-control"></textarea>
<select class="form-control">
<option></option>
</select>
文本
text-muted/text-primary/text-success/text-info/text-warning/text-danger
背景
bg-primary/bg-success/bg-info/bg-warning/bg-danger
其他
关闭按钮<button type="button" class="close" aria-hidden="true">×</button>
下拉菜单的按钮<span class="caret"></span>
左右浮动class="pull-left",class="pull-right"
强行显示class="show"
强行隐藏
class="hide"会把该元素的位置也让出来
class="invisible该元素的位置会保留
栅格系统
<div class="container">
<div class="row">
<div class="col-xs-12 ">一共12列</div>
三.组件
字体图标
<span class="glyphicon glyphicon-asterisk"></span>
下拉菜单
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">静态页面(不可点击)</li>
<li><a href="#">HTML</a></li>
<li role="presentation">
<a href="#">CSS</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
按钮组
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group btn-group-vertical btn-group-lg/xs/sm" role="group" aria-label="web">
<button type="button" class="btn btn-default">Html</button>
</div>
复选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="checkbox" > DOTA
</label>
<label class="btn btn-default">
<input type="checkbox" > WOW
</label>
</div>
单选框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>LOL(默认选中)
</label>
<label class="btn btn-default">
<input type="radio" > DOTA
</label>
<label class="btn btn-default">
<input type="radio" > WOW
</label>
</div>
下拉按钮式菜单
<div class="btn-group">
<button type="button" class="btn btn-default/btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
输入框组
基本组合/尺寸
<div class="input-group/input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="from-control" placeholder="用户名" aria-describedby="basic-addon1">
</div>
复选框和单选框
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
整合按钮
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
