bootstrap第一天

<meta charset="UTF-8">//设置字符集

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">//设置移动设备优先

//引入bootstrap文件路径，一般.min就行（是bootstrap.css或botstrap.js的压缩版）

<link rel="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script src="js/jquery-1.7.2.min.js"></script>//建立在jq基础上，所以需要引入jq

//class标签应用合集

<div class="container">//div居中显示

<!--<div class="container-fluid">-->//div全屏显示

<font class="h1">asdasdasdzxczxc</font>//h1~h6，是标题样式相当于<h1>~<h6>

    //文本样式

<del>asd</del>//删除线

<b>加粗</b>
<strong>加粗</strong>
<i>斜体
<em>斜体</em>
<g>删除线</g>

  //文本对齐样式

.text-left //左对齐

.text-right  //右对齐

.text-center  //居中对齐

.text-justify  //两端对齐

<h1 class="text-center">

    //列表样式

.list-unstyled  //无符号，去掉前面的符号

.list-inline  //行内块，放在同一行，导航栏用的

<ul class="list-unstyled">
<li>html</li>
<li>mysql</li>
</ul>

    //表格样式

.table

.table-striped  //背景颜色隔行变色

.table-bordered  //边框

.table-hover  //鼠标悬停变色，离开恢复

.table-condensed  //紧凑的表格（表格减少空白）

<table class="table table-striped">

    //行或单元格背景颜色，智能给<tr>或<td>添加

.active  //当前样式，跟下面的区别就是颜色不一样

.success  

.info

.warning

.danger

    //响应式表格，将table元素包裹在.table-responsive元素内，即可创建响应式表格，窗口变小（小于768px）时table会出现滚动条

<div class="table-responsive">
   <table class="table table-striped table-bordered table-hover table-condensed">
    <tr class="active">
    <td>asdzczx</td>
    <td>asdzczx</td>
    <td>asdzczx</td>
    <td>asdzczx</td>

    </tr>
   
   </table>
  </div> 

     //表单样式

.form-group  //表单组样式：将<label>和表单元素包含其中，获得更好的排列

.form-control  //表单元素 样式：常用于<input>、<textarea>、<select>

.form-control-static  //比上面的form-control小一点

.form-inline

.chekbox  //复选框样式

.radio  //单选框样式

.disable  //可以禁用单选框或复选框的文本

.form-horizontal  //水平排列的表单（用于form元素）

.sr-only  //隐藏元素

.checkbox-inline  //控制多个复选框元素在同一行

.radio-inline

<form>
    <div class="form-group">
    <label for="username">用户名</label>  <!--有for可以实现单击文字获得输入框焦点（focus）-->
    <input class="form-control-static" type=" text" id="username" placeholder="aaaa" />
    </div>
 </form>

    //Placehoder属性，给<input>添加提示信息

.form-inline  //内联表单样式（用于form元素）：使form内的元素都排在一行

.sr-only  //隐藏元素

<form class="form-inline">
    <div class="form-group">
    <label for="username">用户名</label>  <!--有for可以实现单击文字获得输入框焦点（focus）-->
    <input class="form-control" type=" text" id="username" placeholder="aaaa" />
    </div>
    <div class="form-group">
    <label for="password">密码</label>  <!--有for可以实现单击文字获得输入框焦点（focus）-->
    <input class="form-control" type=" text" id="password" placeholder="请输入密码" />
    </div>
</form>

 

<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!--会使用当前浏览器的最新内核，保证bootstrap能正常使用-->

//按钮样式

可以使用按钮样式的元素：<a>、<input>、<button>

.btn  //按钮的全局样式：<input type='button' class='btn'>

预定义样式：.btn-default、btn-primary、btn-success、btn-info、btn-warming、btn-danger、btn-link

.active  //按钮激活状态

.disable  //按钮禁用状态

按钮尺寸：.btn-lg(大按钮)、.btn-sm(小按钮)、btn-xs(超小按钮)

.btn-block：将按钮拉伸撑满整个父元素

//图片样式

.img-responsive  //直接为图片添加该样式，实现响应式图片

.center-block  //图片居中样式，而不能使用text-center样式

图片形状样式：.img-rounded(圆角图片)’.img-circle(圆形图片)、img-thumbnail(边框圆角)

//辅助类样式