Bootstrap学习笔记-css布局 Hello_yihao的博客

Bootstrap学习笔记-css布局

一. 了解css布局概要

优点：
    通过最基础，最简单的组合来实现网页开发
    快速的制作出精美的页面
概要：
    使用HTML5文档类型
    移动先行
    响应式图片

二. 掌握css布局基础排版

基础排版-标题

 - bootstrap为传统的标题h1-h6重新定义了标准的样式 使得所有浏览器下显示都一样，可以直接使用h1标签 也可以给 所需要的标签加上对应的class

<h1>标题1</h1> 
<span class="h1"> 这同样也是标题1</span>

 - bootstrap同步定义了6个class样式（.h1-.h6）可让 非标题元素具有相同的样式，不过class样式没有定义margin-top和padding-top

基础排版-主题内容

 - bootstrap为全局设置字体大小font-size为14px，行 间距为字体大小的1.428倍

 - p段落标签加了个margin-bottom，大小是行间距的一半突出的段落可以加.lead（可以增大字体，粗细，行间距，margin-bottom）

基础排版-对齐方式
- .text-left 左对齐

• .text-center 中间对齐

• .text-right 右对齐

<p class="lead">这是一个突出的标签这是一个突出的标签这是一个突出的标签</p>
    <p class="text-left">这是一个左对齐的p标签</p>
    <p class="text-center">这是一个居中对齐的p标签</p>
    <p class="text-right">这是一个右对齐的p标签</p>

基础排版-列表

• 无序列表，有序列表用法还和传统的一样，bootstrap
• 只是对margin和行间距做了微调
• 去点列表（.list-unstyled）
• 内敛列表（.list-inline）
• 水平定义列表（.dl-horizontal）

注意：去点样式列表只会去除其子元素（li）的默认样式， 并不会去除其孙子辈的默认样式，要想去除分别在ul上添加class：list-unstyled

 <ul class="list-unstyled">
        <li>这是列表1</li>
        <li>这是列表2</li>
        <li>
            <ul>
                <li>这是列表1</li>
                <li>这是列表2</li>
                <li>这是列表3</li>
            </ul>
        </li>
        <li>这是列表4</li>
        <li>
            <ol>
                <li>这是列表4</li>
                <li>这是列表5</li>
                <li>这是列表6</li>
            </ol>
        </li>
        <li>这是列表6</li>
    </ul>

*内敛列表：即将列表横排 如果需要去除li之间的空隙 可以 在其父元素上使用 display: flex; 可参考关于去除inline block 之间的空格

定义列表：横排（水平排列） 超小屏以上才会生效
    <dl class="dl-horizontal">
        <dt>标题1</dt>
        <dd>这是标题1的内容</dd>
        <dt>标题2</dt>
        <dd>这是标题2的内容</dd>
        <dt>标题3</dt>
        <dd>这是标题3的内容</dd>
        <dt>标题4</dt>
        <dd>这是标题4的内容</dd>
    </dl>

基础排版-按钮

可以使用button标签，或者input（type=button），input（type=submit）
a（role=button）的方式来创建你的按钮。
建议使用button标签

    bootstrap提供了7种样式的按钮风格
        btn-default(默认)，btn-primary（视觉加重）
        btn-success（成功），btn-info（提示信息）
        btn-warning（警告），btn-danger（危险），
        btn-link（看起来像链接）
        按钮大小
            .btn-lg 大型
            .btn-sm 小型
            .btn-xs 超小型
        按钮状态：
            活动状态：（按钮颜色变深，边框颜色更深，内置阴影）
                .active
            禁用状态：（按钮背景色65%透明处理，I9是灰色）
                disabled = 'disabled'
                .disabled（不禁止按钮的默认行为）

<div class="container">
    <button class="btn btn-default">默认按钮</button>
    <br/>
    <br/>
    <button class="btn btn-primary">视觉加重</button>
    <br/>
    <br/>
    <button class="btn btn-success">成功</button>
    <br/>
    <br/>
    <button class="btn btn-info">提示信息</button>
    <br/>
    <br/>
    <button class="btn btn-warning">警告</button>
    <br/>
    <br/>
    <button class="btn btn-danger">危险</button>
    <br/>
    <br/>
    <button class="btn btn-link">看起来像链接</button>
    <button class="btn btn-primary btn-lg">视觉加重(大的)</button>
    <button class="btn btn-info btn-sm">提示信息（小的）</button>
    <button class="btn btn-danger btn-xs">危险(超小的)</button>
    <br/>
    <br/>
    <button class="btn btn-primary active">视觉加重(活动状态)</button>
    <button class="btn btn-primary disabled">视觉加重(禁用状态)</button>

</div>

表格

给table添加
.table 表格占满全屏
.table-striped 带背景条纹的表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮的表格
.table-condensed 紧凑型表格

同时也可以给行（tr）或 列（td）添加行级元素样式
.active 表示当前活动的信息
.success 表示成功或正确的信息
.info 标示普通的提示信息或动作
.warning 标示警告或需要用户注意
.danger 标示危险或潜在带来的负面影响

<table class="table table-bordered table-condensed">
    <tr class="active">
        <th>#</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr class="success">
        <td></td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
        <td>语文</td>
    </tr>
    <tr class="info">
        <td></td>
        <td>美术</td>
        <td>化学</td>
        <td>语文</td>
        <td>物理</td>
        <td>语文</td>
    </tr>
    <tr class="warning">
        <td></td>
        <td>数学</td>
        <td>语文</td>
        <td>生物</td>
        <td>历史</td>
        <td>语文</td>
    </tr>
    <tr class="danger">
        <td></td>
        <td>音乐</td>
        <td>语文</td>
        <td>政治</td>
        <td>化学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td></td>
        <td>体育</td>
        <td class="danger">化学</td>
        <td>语文</td>
        <td>政治</td>
        <td>物理</td>
    </tr>
    <tr>
        <td></td>
        <td>语文</td>
        <td>化学</td>
        <td>美术</td>
        <td class="active">哲学</td>
        <td>生物</td>
    </tr>
</table>

最后在使用这些代码是不要忘记 引入bootstrap 的相关文件 可参考 另一篇文章：关于如何使用bootstrap 和 栅格