bootstrap学习笔记(增加网格应用)详解编程语言

bootstrap笔记：

文件引用：

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

    <script src=”js/jquery-1.12.4.min.js”></script>

    <script src=”js/bootstrap.min.js”></script>

自动布局

    <div class=”container”></div>

网格：
    1、网格样式必须放在.container的div里面 一行row可以拆分12列
    2、最大容器宽度    None (auto)     750px          970px          1170px
        Class 前缀    .col-xs-    .col-sm-    .col-md-    .col-lg-
        如col-lg-3放在.row的div内
    3、设置左外边距 col-md-offset-3  //当前元素的左外边距增加3列
    4、可以嵌套

基本排版：

    .lead     使段落突出显示     

    .small     设定小文本 (设置为父文本的 85% 大小)     

    .text-left     设定文本左对齐     

    .text-center     设定文本居中对齐     

    .text-right     设定文本右对齐     

table标签常用效果：

    <table class=”table table-hover”></table> //鼠标悬停状态

form表单样式：

    <div class=”form-group col-lg-3″>

        <label for=”name”>名称</label>

        <input type=”text” id=”name” class=”form-control input-lg ” placeholder=”请输入名称”>

    </div>

    高度：input-lg 默认 input-sm

    宽度：col-lg-*

按钮样式：

    <!– 标准的按钮 –>

    <button type=”button” class=”btn btn-default”>默认按钮</button>

    <!– 提供额外的视觉效果，标识一组按钮中的原始动作 –>

    <button type=”button” class=”btn btn-primary”>原始按钮</button>

    <!– 表示一个成功的或积极的动作 –>

    <button type=”button” class=”btn btn-success”>成功按钮</button>

    <!– 信息警告消息的上下文按钮 –>

    <button type=”button” class=”btn btn-info”>信息按钮</button>

    <!– 表示应谨慎采取的动作 –>

    <button type=”button” class=”btn btn-warning”>警告按钮</button>

    <!– 表示一个危险的或潜在的负面动作 –>

    <button type=”button” class=”btn btn-danger”>危险按钮</button>

    <!– 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 –>

    <button type=”button” class=”btn btn-link”>链接按钮</button>

分页：

    基本分页：

    <ul class=”pager”>

        <li><a href=”#”>Previous</a></li>

        <li><a href=”#”>Next</a></li>

    </ul>