bootstrap

最新推荐文章于 2024-08-31 06:39:46 发布

原创最新推荐文章于 2024-08-31 06:39:46 发布 · 89 阅读

CC 4.0 BY-SA版权

1 栅格

<div  class="container">
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
	</div>


	<div class="row">
		<div class="col-md-3">
		<div class="col-md-3">
		<div class="col-md-3">
		<div class="col-md-3">
	</div>


<div class="row">
		<div class="col-md-4  col-md-offset-1">  //偏移1个位置
	</div>
</div>
//一行承载12个

2 Bootstrap Css表格


<div class="container">
    <table class="table table-striped   table-bordered  table-hover   table-condensed">
    
//table-striped是斑马样式
//table-bordered是给表格加边框
//table-hover是鼠标经过单元格的时候的状态
//table-condensed是紧凑型的


        <thead>
            <tr class="success">
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>


        <tr class="active"> //鼠标悬停的状态
            <td>表格数据</td>
            <td>表格数据</td>
            <td>表格数据</td>
        </tr>



            <tr class="danger">
                <td>表格数据</td>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
        </thead>
    </table>
</div>

3 Bootstrap CSS表单，按钮和图片

<form  class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label" >Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control">
        </div>
    </div>






    <div class="form-group">
        <div class="col-sm-10  col-sm-offset-2">
            <div class="checakbox">
                <label >
                    <input type="checkbox">记住密码
                </label>
            </div>
        </div>
    </div>





    <div class="form-group">
        <div class="col-sm-offset-2  col-sm-10">
            <button type="submit" class="btn  btn-default">登录</button>
        </div>
    </div>

    .



</form>