Bootstrap 01CSS样式

css样式

模板:

注意jquery要放在bootstrap前面,因为bootstrap是基于jquery的,必须先引用才能生效

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
</body>
</html>
栅格布局

页面被分均为12格

xs<768px手机    768px
<!-- xs<768px手机  768px<sm平板  990px<md电脑  1200px<lg宽屏电脑 -->
    <div class="col-xs-1 col-sm-4 col-md-3 col-lg-4" style="border: 1px solid red">1</div>
    <div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" style="border: 1px solid red">2</div>
    <div class="col-xs-9 col-sm-4 col-md-5 col-lg-4" style="border: 1px solid red">3</div>
</div>
<div>
    <div class="col-xs-4 col-md-1" style="border: 1px solid red">1</div>
    <div class="col-xs-4 col-md-2" style="border: 1px solid red">2</div>
    <div class="col-xs-4 col-md-9" style="border: 1px solid red">3</div>
</div>

颜色:

muted    primary   success  info  warning   danger

列偏移:col-xs-offset-4

<div class="row">
    <div class="col-xs-4" style="border: 1px solid red">1</div>
    <div class="col-xs-4 col-md-offset-4" style="border: 1px solid red">2</div>
    <div class="col-xs-4 " style="border: 1px solid blue">3</div>
    <div class="col-xs-4 " style="border: 1px solid blue">4</div>
    <div class="col-xs-4 col-xs-offset-4" style="border: 1px solid gold">5</div>
    <div class="col-xs-4 " style="border: 1px solid gold">6</div>
</div>

列排序:col-xs-push-4 向右推4格
col-xs-pull-4 向左拉4格

<div class="row">
    <div class="col-xs-4" style="border: 1px solid gold">4</div>
    <div class="col-xs-8" style="border: 1px solid gold">8</div>

    <div class="col-xs-4 col-xs-push-8" style="border: 1px solid gold">4</div>
    <div class="col-xs-8 col-xs-pull-4" style="border: 1px solid gold">8</div>

    <div class="col-xs-4 " style="border: 1px solid gold">4</div>
    <div class="col-xs-8 col-xs-pull-4" style="border: 1px solid gold">8</div>
</div>

居中:container居中布局,页面大小为适中;container-fluied页面宽度为100%;

<!--居中布局-->
<div class="container">
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold" >1</div>
        <div class="col-xs-4" style="background-color:gold">1</div>
        <div class="col-xs-4" style="background-color:gold">1</div>
    </div>
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold">2</div>
        <div class="col-xs-4" style="background-color:gold">2</div>
        <div class="col-xs-4" style="background-color:gold">2</div>
    </div>
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold">3</div>
        <div class="col-xs-4" style="background-color:gold">3</div>
        <div class="col-xs-4" style="background-color:gold">3</div>
    </div>
</div>
<!--流式布局 100%屏占比-->
<div class="container-fluid">
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold" >1</div>
        <div class="col-xs-4" style="background-color:gold">1</div>
        <div class="col-xs-4" style="background-color:gold">1</div>
    </div>
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold">2</div>
        <div class="col-xs-4" style="background-color:gold">2</div>
        <div class="col-xs-4" style="background-color:gold">2</div>
    </div>
    <div class="col-xs-4" style="background-color:pink">
        <div class="col-xs-4" style="background-color:gold">3</div>
        <div class="col-xs-4" style="background-color:gold">3</div>
        <div class="col-xs-4" style="background-color:gold">3</div>
    </div>
</div>
排版

标题:<h1>-<h6>

副标题:<h1><small>副标题</small></h1>

h1>一级标题<small>副标题</small></h1>
<h2>二级标题<small>副标题</small></h2>
<h3>三级标题<small>副标题</small></h3>
<h4>四级标题<small>副标题</small></h4>
<h5>五级标题<small>副标题</small></h5>
<h6>六级标题<small>副标题</small></h6>

页面主题:page-header

<h1 class="page-header">页面主题</h1>

小号字体:<small>强调字体:<strong>斜体:<em>

<p>普通字体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
    eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
    vel!</p>
<p><small>小字体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
    eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
    vel!</small></p>
<p><strong>粗体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
    eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
    vel!</strong></p>
<p><em>斜体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
    eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
    vel!</strong></em>

缩略语:<addr title=“解释语”>被解释语</addr>

<abbr title="文本生成">Lorem</abbr>

引用:<blockquote>引用语句</blockquote>

<blockquote>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
            excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
            tempora temporibus totam ullam!
        </p>
    </blockquote>
    <blockquote class="pull-right">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
            excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
            tempora temporibus totam ullam!
        </p>
    </blockquote>
    <blockquote class="pull-left">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
            excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
            tempora temporibus totam ullam!
        </p>
    </blockquote>

描述:

 <dl>
        <dt>sjsji</dt>
        <dt>shjhg</dt>
    </dl>
    <dl class="dl-horizontal">
        <dt>A</dt>
        <dd>a</dd>
        <dt>B</dt>
        <dd>b</dd>
    </dl>

代码块:<pre>代码</pre>

<p> seeion的带标签代码应写成&lt;seeion></p>
    <pre>
        这里是代码域
        &lt;html>
        &lt;head>
        &lt;body>
    </pre>
控件

列表:

<div class="container">
    <!-- 无序列表-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <!-- 有序列表-->
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ol>
    <!-- 无样式列表-->
    <ul class="list-unstyled">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
    <!-- 内联列表:用于导航栏-->
    <ul class="list-inline">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>

表格:

<!-- 普通表格-->
    <table class="table">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <hr/>
    <!-- 条纹表格-->
    <table class="table table-striped">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <hr/>
    <!-- 带边框表格-->
    <table class="table table-bordered">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <hr/>
    <!-- 带边框条纹表格-->
    <table class="table table-bordered table-striped">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <!-- 鼠标悬停表格-->
    <table class="table table-hover">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <!-- 紧缩表格-->
    <table class="table table-bordered table-striped table-condensed">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>飒飒</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>瑟瑟</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>滴滴</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
    <!-- 状态表格-->
<table class="table table-bordered table-striped table-condensed table-condensed">
    <tr class="active">
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr class="success">
        <td>飒飒</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr class="info">
        <td>瑟瑟</td>
        <td>男</td>
        <td>23</td>
    </tr>
    <tr class="warning">
        <td>滴滴</td>
        <td>男</td>
        <td>24</td>
    </tr>
    <tr class="danger">
        <td>滴滴</td>
        <td>男</td>
        <td>24</td>
    </tr>
</table>
<!-- 响应式表格-->
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed table-condensed">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>飒飒</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr>
        <td>瑟瑟</td>
        <td>男</td>
        <td>23</td>
    </tr>
    <tr>
        <td>滴滴</td>
        <td>男</td>
        <td>24</td>
    </tr>
</table>

表单:

<!--普通表单-->
<h1>普通表单</h1>
<div class="container">
    <form rel="form">
        <div class="form-group">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group">
            密码:<input type="password" class="form-control">
        </div>
        <div class="form-group">
            邮箱:<input type="email" class="form-control">
        </div>
        <div class="form-group">
            上传文件:<input type="file">
        </div>
        <div class="form-group">
            爱好:<input type="checkbox" name="habit">读书
            <input type="checkbox" name="habit">看电影
            <input type="checkbox" name="habit">玩游戏
        </div>
        <div>
            性别:<input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </div>
        <div class="form-group">
            <input type="submit" value="提交" class="btn">
        </div>
        <div class="form-group">
        </div>
    </form>
</div>
<hr>
<!--内联表单-->
<h1>内联表单</h1>
<div class="container">
    <form rel="form" class="form-inline">
        <div class="form-group">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group">
            密码:<input type="password" class="form-control">
        </div>
        <div class="form-group">
            邮箱:<input type="email" class="form-control">
        </div>
        <div class="form-group">
            上传文件:<input type="file">
        </div>

        <div class="form-group">
            <input type="submit" value="提交" class="btn">
        </div>
        <div class="form-group">
        </div>
    </form>
</div>
<hr>
<!--水平排列表单-->
<h1>水平排列表单</h1>
<div class="container">
    <form rel="form" class="form-horizontaly/">
        <div class="form-group">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group">
            密码:<input type="password" class="form-control">
            上传文件:<input type="file">
        </div>

        <div class="form-group">
            <input type="submit" value="提交" class="btn">
        </div>
        <div class="form-group">
        </div>
        <div>
            <h1>select</h1>
            <select class="form-control" >
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <select multiple class="form-control" disabled>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <div>
            <h1>文本域</h1>
            <textarea class="form-control"></textarea>
        </div>
    </form>
</div>
<hr>
<!--表单状态-->
<h1>表单状态</h1>
<div class="container">
    <form rel="form" class="form-horizontaly/">
        <fieldset disabled>
        <div class="form-group">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group">
            密码:<input type="password" class="form-control">
            上传文件:<input type="file">
        </div>

        <div class="form-group">
            <input type="submit" value="提交" class="btn">
        </div>
        <div class="form-group">
        </div>
        <div>
            <h1>select</h1>
            <select class="form-control">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <select multiple class="form-control">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <div>
            <h1>文本域</h1>
            <textarea class="form-control"></textarea>
        </div>
        </fieldset>
    </form>
</div>
<hr>
<!--校验状态-->
<h1>校验状态</h1>
<div class="container">
    <form rel="form" class="form-horizontaly/">
        <div class="form-group has-error">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group has-feedback">
            密码:<input type="password" class="form-control">
            上传文件:<input type="file">
        </div>

        <div class="form-group ">
            <input type="submit" value="提交" class="btn">
        </div>
        <div>
            <h1>select</h1>
            <select class="form-control has-success" >
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <select multiple class="form-control" disabled>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <div>
            <h1>文本域</h1>
            <textarea class="form-control has-warning"></textarea>
        </div>
    </form>
</div>
<hr>
<!--控件尺寸-->
<h1>控件尺寸</h1>
<div class="container">
    <form rel="form" class="form-horizontaly/">
        <div class="form-group input-lg">
            用户名:<input type="text" class="form-control">
        </div>
        <div class="form-group input-md">
            密码:<input type="password" class="form-control">
            上传文件:<input type="file">
        </div>

        <div class="form-group ">
            <input type="submit" value="提交" class="btn">
        </div>
        <div>
            <h1>select</h1>
            <select class="form-control " >
                <option class="form-control input-lg">A</option>
                <option class="form-control input-md">B</option>
                <option class="form-control input-xs">C</option>
            </select>
            <select multiple class="form-control" disabled>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
        <div>
            <h1>文本域</h1>
            <textarea class="form-control has-warning"></textarea>
        </div>
    </form>
</div>
<hr>

图片:

<div class="img">
        <img src="img/timg.jpg" class="img-circle">
        </div>
        <div class="img">
            <img src="img/timg.jpg" class="img-responsive">
        </div>
        <div class="img">
            <img src="img/timg.jpg" class="img-rounded">
        </div>
        <div class="img">
            <img src="img/timg.jpg" class="img-thumbnail">
        </div>

响应式工具:

div class="row">
    <div class="col-xs-12 col-sm-0">
        <span class="visible-xs">手机可见</span>
    </div>
    <div class="col-xs-0 col-sm-12">
        <span class="visible-sm">平板可见</span>
    </div>
    <div class="col-sm-0 col-md-12">
        <span class="visible-md">电脑可见</span>
    </div>
    <div class="col-md-0 col-sm-12">
        <span class="visible-lg">大屏可见</span>
    </div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值