码迷，mamicode.com
首页 > 其他好文 > 详细

bootstrap 基础（二）

时间：2017-09-13 10:46:08      阅读：149      评论：0      收藏：0      [点我收藏+]

标签：pdo   基本   tar   图标   menu   辅助   ges   one   文字   

1 栅格系统偏移

  • 栅格系统的偏移只能向右：col-xs-offset-x。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        div[class*=‘col-md‘]{
            border:1px solid #1b6d85;
        }

    </style>

</head>
<body  style="background-color: #3c3c3c">
    <div class="container-fluid" style="background-color: white">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <!--
        pc端大屏幕显示四张图片，pc端中等屏幕显示三张图片，平板显示二张图片，手机端显示一张图片
        -->

        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 col-md-offset-6" >4</div>
            <div class="col-md-2">2</div>
        </div>

    </div>
</body>
</html>

技术分享

 

2 栅格系统的排序

  • col-xs-pull-5 向左偏移5个栅格，pull是拉取的意思。
  • col-xs-push-5 向右偏移5个栅格，push是推的意思。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        div[class*=‘col-md‘]{
            border:1px solid #1b6d85;
        }

    </style>

</head>
<body  style="background-color: #3c3c3c">
    <div class="container-fluid" style="background-color: white">
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <!--
        pc端大屏幕显示四张图片，pc端中等屏幕显示三张图片，平板显示二张图片，手机端显示一张图片
        -->

        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
                <p>
                    美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">a</div>
            <div class="col-md-4">b</div>
            <div class="col-md-4">c</div>
        </div>

        <div class="row">
            <div class="col-md-4 col-md-push-4">a</div>
            <div class="col-md-4 col-md-pull-4">b</div>
            <div class="col-md-4">c</div>
        </div>

    </div>
</body>
</html>

技术分享

 

3 辅助类

  •  情境文本颜色
    • class="text-muted" 柔和色
    • class="text-success"  
    • class="text-parimary"
    • class="text-info" 
    • class="text-warning" 
    • class="text-danger" 　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">


    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
     <p class="text-muted">平林漠漠烟如织</p>
     <p class="text-primary">寒山一带伤心碧</p>
     <p class="text-success">暝色入高楼</p>
     <p class="text-info">有人楼上愁</p>
     <p class="text-warning">玉阶空伫立</p>
     <p class="text-danger">宿鸟归飞急</p>
 </div>


</body>
</html>

技术分享

  • 情境背景颜色
    • class="bg-primary"
    • class="bg-info"
    • class="bg-success"
    • class="bg-warning"
    • class="bg-danger"　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">


    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
     <!-- 文本颜色 -->
     <p class="text-muted">平林漠漠烟如织</p>
     <p class="text-primary">寒山一带伤心碧</p>
     <p class="text-success">暝色入高楼</p>
     <p class="text-info">有人楼上愁</p>
     <p class="text-warning">玉阶空伫立</p>
     <p class="text-danger">宿鸟归飞急</p>

     <!-- 背景颜色 -->
     <p class="bg-primary">寒山一带伤心碧</p>
     <p class="bg-success">暝色入高楼</p>
     <p class="bg-info">有人楼上愁</p>
     <p class="bg-warning">玉阶空伫立</p>
     <p class="bg-danger">宿鸟归飞急</p>

 </div>


</body>
</html>

技术分享

  • 下拉小三角
    • <span class="caret"></span>　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">


    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
     <!-- 文本颜色 -->
     <p class="text-muted">平林漠漠烟如织</p>
     <p class="text-primary">寒山一带伤心碧</p>
     <p class="text-success">暝色入高楼</p>
     <p class="text-info">有人楼上愁</p>
     <p class="text-warning">玉阶空伫立</p>
     <p class="text-danger">宿鸟归飞急</p>

     <!-- 背景颜色 -->
     <p class="bg-primary">寒山一带伤心碧</p>
     <p class="bg-success">暝色入高楼</p>
     <p class="bg-info">有人楼上愁</p>
     <p class="bg-warning">玉阶空伫立</p>
     <p class="bg-danger">宿鸟归飞急</p>

     <!-- 下拉小三角 -->
     <span class="caret"></span>

 </div>


</body>
</html>

技术分享

  • 快速浮动
    • class="pull-left" 向左浮动，pull的意思是拉
    • class="pull-right" 向右浮动　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        .top{
            width:500px;
            border:1px solid blue;
            margin: 10px auto;
        }
        .pull-left{
            width: 200px;
            height: 200px;
            background-color: #b92c28;
        }
        .pull-right{
            width: 200px;
            height: 200px;
            background-color: #2b542c;
        }
    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
    <div class="top">
        <div class="pull-left">左边哦</div>
        <div class="pull-right">右边啦</div>
    </div>

 </div>


</body>
</html>

技术分享

  • 清除浮动：在父元素上添加overflow:hidden样式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        .top{
            width:500px;
            border:1px solid blue;
            margin: 10px auto;
            overflow: hidden;
        }
        .pull-left{
            width: 200px;
            height: 200px;
            background-color: #b92c28;
        }
        .pull-right{
            width: 200px;
            height: 200px;
            background-color: #2b542c;
        }
    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
    <div class="top">
        <div class="pull-left">左边哦</div>
        <div class="pull-right">右边啦</div>
    </div>

 </div>


</body>
</html>

技术分享

  • 清除浮动：在父元素上直接添加class="clearfix"。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
        .top{
            width:500px;
            border:1px solid blue;
            margin: 10px auto;
        }
        .pull-left{
            width: 200px;
            height: 200px;
            background-color: #b92c28;
        }
        .pull-right{
            width: 200px;
            height: 200px;
            background-color: #2b542c;
        }
    </style>

</head>
<body >

 <div class="container-fluid" style="background-color:#e6e6e6">
    <div class="top clearfix">
        <div class="pull-left">左边哦</div>
        <div class="pull-right">右边啦</div>
    </div>

 </div>


</body>
</html>

技术分享

4 表单

4.1 基本表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" />
    </form>
 </div>


</body>
</html>

技术分享

  • class="form-control"给表单增加样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" class="form-control" />
    </form>
 </div>


</body>
</html>

技术分享

  • class="form-group" 让label标签和input标签形成一个表单组。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
    </form>
 </div>


</body>
</html>

技术分享

  • class=“form-control” 是给输入框加，比如input、textare标签。
  • class="form-group" 是给输入框的父元素加，即外面的盒子加<div class="form-group"></div>

4.2 多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label ><input type="checkbox" name="hobby" value="唱歌" />唱歌</label>
            <label><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

  •  class="checkbox-inline" 是的每个多选框是一行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="唱歌" />唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

  •  禁止：原先直接在input标签上加disabled

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="唱歌" disabled />唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>


    </form>
 </div>


</body>
</html>
    • 这种方式只能在多选框上显示禁止效果，不能和文字一起显示禁止效果。　　
    • 在多选框的父元素上增加class="disabled"，这样就能实现文字鼠标任意滑动都能实现禁止效果。 　　

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>


    </form>
 </div>


</body>
</html>
  • class="checkbox-inline"是给lable标签加，给input和内容加样式。

4.3 单选框

  • 没有加样式的单选框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label><input type="radio" name="sex" value="男"/>男 </label>
            <label><input type="radio" name="sex" value="女"/>女 </label>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

  • class="radio-inline"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form>
        <!-- 基本表单 -->
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

class="radio-inline" 给label标签加，给input和内容加样

 

4.4 输入框组

  • 比如，像下面的（某宝截图）。

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>
        <!-- 输入框组 -->
        <div class="">
            <span >搜索</span>
            <input type="search" name="search" id="search" class="form-control"/>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>
        <!-- 输入框组 -->
        <div class="">
            <!-- addon在英文中是插件的意思 -->
            <span class="input-group-addon">搜索</span>
            <input type="search" name="search" id="search" class="form-control"/>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>
        <!-- 输入框组 -->
        <div class="input-group">
            <!-- addon在英文中是插件的意思 -->
            <span class="input-group-addon">搜索</span>
            <input type="search" name="search" id="search" class="form-control"/>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

技术分享

  • 温馨小提示：form-group是为了让每一个表单项都产生一个margin值，不信，请看下面的代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>
        <!-- 输入框组 -->
        <div class="input-group">
            <!-- addon在英文中是插件的意思 -->
            <span class="input-group-addon">搜索</span>
            <input type="search" name="search" id="search" class="form-control"/>
        </div>
        <div class="input-group">
            <input type="search" name="sc" id="sc" class="form-control"/>
            <div class="input-group-addon">查询内容</div>
        </div>



    </form>
 </div>


</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>

        <div class="form-group">
            <!-- 输入框组 -->
            <div class="input-group">
                <!-- addon在英文中是插件的意思 -->
                <span class="input-group-addon">搜索</span>
                <input type="search" name="search" id="search" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="search" name="sc" id="sc" class="form-control"/>
                <div class="input-group-addon">查询内容</div>
            </div>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>

        <div class="form-group">
            <!-- 输入框组 -->
            <div class="input-group">
                <!-- addon在英文中是插件的意思 -->
                <span class="input-group-addon">搜索</span>
                <input type="search" name="search" id="search" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="search" name="sc" id="sc" class="form-control"/>
                <div class="input-group-addon">查询内容</div>
            </div>
        </div>
        <!--
            带有搜索图标的
            glyphicon 图标，默认
            glyphicon-search 搜索图标
        -->
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search"></span>
                </span>
                <input type="search" name="sea" id="sea" class="form-control"/>
            </div>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

4.5 响应式表单

  • 表单由纵向变为横向（不用）
  • 在form标签上添加class="form-inline"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
    <form class="form-inline">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>

        <div class="form-group">
            <!-- 输入框组 -->
            <div class="input-group">
                <!-- addon在英文中是插件的意思 -->
                <span class="input-group-addon">搜索</span>
                <input type="search" name="search" id="search" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="search" name="sc" id="sc" class="form-control"/>
                <div class="input-group-addon">查询内容</div>
            </div>
        </div>
        <!--
            带有搜索图标的
            glyphicon 图标，默认
            glyphicon-search 搜索图标
        -->
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search"></span>
                </span>
                <input type="search" name="sea" id="sea" class="form-control"/>
            </div>
        </div>


    </form>
 </div>


</body>
</html>

 

技术分享

  • 给form标签添加class="form-horizontal" ，而且要结合栅格系统，形成响应式表单。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
     <!-- 响应式表单 -->
    <form class="form-horizontal">
        <!-- 基本表单 -->
        <div class="form-group ">
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" class="form-control"/>
        </div>
        <div class="form-group">
            <label for="telphone">手机号</label>
            <input type="text" name="telphone" id="telphone" class="form-control"/>
        </div>
        <!-- 多选框 -->
        <div class="form-group">
            <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" value="唱歌" disabled/>唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="跳舞"/>跳舞</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="写代码" />写代码</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby" value="分享" />分享</label>
        </div>
        <!-- 单选框 -->
        <div class="form-group">
            <label class="radio-inline"><input type="radio" name="sex" value="男"/>男 </label>
            <label class="radio-inline"><input type="radio" name="sex" value="女"/>女 </label>
        </div>

        <div class="form-group">
            <!-- 输入框组 -->
            <div class="input-group">
                <!-- addon在英文中是插件的意思 -->
                <span class="input-group-addon">搜索</span>
                <input type="search" name="search" id="search" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="search" name="sc" id="sc" class="form-control"/>
                <div class="input-group-addon">查询内容</div>
            </div>
        </div>
        <!--
            带有搜索图标的
            glyphicon 图标，默认
            glyphicon-search 搜索图标
        -->
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search"></span>
                </span>
                <input type="search" name="sea" id="sea" class="form-control"/>
            </div>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

  • 结合栅格系统的响应式表单
    • 传统方式：　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
     <!-- 响应式表单 -->
    <form class="form-horizontal">
        <div class="row">
            <div class="form-group">
                <div class="col-md-2 col-lg-2 col-xs-2 col-sm-2 text-right text-primary">
                    <label for="username">姓名</label>
                </div>
                <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10">
                    <input type="text" name="username" id="username" placeholder="请输入姓名" class="form-control"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="col-md-2 col-lg-2 col-xs-2 col-sm-2 text-right text-primary">
                    <label for="password">密码</label>
                </div>
                <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10">
                    <input type="password" name="password" id="password" placeholder="请输入密码" class="form-control"/>
                </div>
            </div>
        </div>


    </form>
 </div>


</body>
</html>

技术分享

    • 其实，和表单结合的话，不需要些<div class="row"></div>　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">
     <!-- 响应式表单 -->
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 col-xs-2 col-lg-2 col-sm-2 text-right text-primary" for="username">姓名</label>
            <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10">
                <input type="text" class="form-control" name="username" id="username" placeholder="请输入姓名"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 col-xs-2 col-lg-2 col-sm-2 text-right text-primary" for="password">密码</label>
            <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10">
                <input type="text" class="form-control" name="password" id="password" placeholder="请输入密码"/>
            </div>
        </div>

    </form>
 </div>


</body>
</html>

技术分享

 

5 按钮

  • 可以加按钮效果的标签：
    • <input type="button" value="按钮"/>
    • <button>按钮</button>
    • <a href="#">按钮</a>　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button>新增</button>
    <input type="button" value="修改"/>
     <a href="#">删除</a>

 </div>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn">新增</button>
    <input type="button" class="btn" value="修改"/>
     <a href="#" class="btn">删除</a>

 </div>

</body>
</html>

技术分享

  • class="btn"是按钮样式的基类。
    • class="btn btn-default"
    • class="btn btn-primary"
    • class="btn btn-success"
    • class="btn btn-info"
    • class="btn btn-warning"
    • class="btn btn-danger"　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>

 </div>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>


     <button class="btn">1</button>
     <button class="btn btn-default">2</button>
     <button class="btn btn-primary">3</button>
     <button class="btn btn-success">4</button>
     <button class="btn btn-info">5</button>
     <button class="btn btn-warning">6</button>
     <button class="btn btn-danger">7</button>

 </div>

</body>
</html>

技术分享

  • class="btn active"按钮激活
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>


     <button class="btn">1</button>
     <button class="btn btn-default">2</button>
     <button class="btn btn-primary">3</button>
     <button class="btn btn-success">4</button>
     <button class="btn btn-info">5</button>
     <button class="btn btn-warning">6</button>
     <button class="btn btn-danger">7</button>

     <button class="btn btn-success">成功？</button>
     <button class="btn btn-success active">必须成功</button>

 </div>

</body>
</html>

技术分享

  • class="btn btn-lg"  按钮大小
  • class="btn btn-sm" 按钮大小
  • class="btn btn-xs" 按钮大小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>

     <br/>

     <button class="btn">1</button>
     <button class="btn btn-default">2</button>
     <button class="btn btn-primary">3</button>
     <button class="btn btn-success">4</button>
     <button class="btn btn-info">5</button>
     <button class="btn btn-warning">6</button>
     <button class="btn btn-danger">7</button>

     <br/>

     <button class="btn btn-success">成功？</button>
     <button class="btn btn-success active">必须成功</button>

     <br/>
     <button class="btn btn-default btn-lg">大</button>
     <button class="btn btn-default btn-xm">大</button>
     <button class="btn btn-default btn-sm">大</button>



 </div>

</body>
</html>

技术分享

  • class="btn-group" 按钮组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>

     <br/>

     <button class="btn">1</button>
     <button class="btn btn-default">2</button>
     <button class="btn btn-primary">3</button>
     <button class="btn btn-success">4</button>
     <button class="btn btn-info">5</button>
     <button class="btn btn-warning">6</button>
     <button class="btn btn-danger">7</button>

     <br/>

     <button class="btn btn-success">成功？</button>
     <button class="btn btn-success active">必须成功</button>

     <br/>
     <button class="btn btn-default btn-lg">大</button>
     <button class="btn btn-default btn-xm">大</button>
     <button class="btn btn-default btn-sm">大</button>
     <button class="btn btn-default">大</button>

     <br/>
     <!-- 按钮组 -->
     <div class="">
         <button class="btn btn-success">新增内容</button>
         <button class="btn btn-success">修改内容</button>
         <button class="btn btn-success">查询内容</button>
     </div>



 </div>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 表单 -->
 <div class="container" style="background-color:#e6e6e6">

    <button class="btn btn-default">新增</button>
    <input type="button" class="btn btn-default" value="修改"/>
     <a href="#" class="btn btn-default">删除</a>

     <br/>

     <button class="btn">1</button>
     <button class="btn btn-default">2</button>
     <button class="btn btn-primary">3</button>
     <button class="btn btn-success">4</button>
     <button class="btn btn-info">5</button>
     <button class="btn btn-warning">6</button>
     <button class="btn btn-danger">7</button>

     <br/>

     <button class="btn btn-success">成功？</button>
     <button class="btn btn-success active">必须成功</button>

     <br/>
     <button class="btn btn-default btn-lg">大</button>
     <button class="btn btn-default btn-xm">大</button>
     <button class="btn btn-default btn-sm">大</button>
     <button class="btn btn-default">大</button>

     <br/>
     <!-- 按钮组 -->
     <div class="btn-group">
         <button class="btn btn-success">新增内容</button>
         <button class="btn btn-success">修改内容</button>
         <button class="btn btn-success">查询内容</button>
     </div>



 </div>

</body>
</html>

技术分享

6 缩略图

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
 <div class="container-fluid" style="background-color:#e6e6e6">

     <!-- 缩略图 -->
    <div class="row">
        <!-- 第一个缩略图  -->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <!-- 圆角边框 -->
            <div class="thumbnail">
                <img src="img/timg.jpg" class="img-responsive"/>
                <div class="caption">
                    <h3 class="bg-info">美女啊</h3>
                    <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
                </div>
                <div class="text-right">
                    <button class="btn btn-success btn-sm">哈哈</button>
                    <button class="btn btn-info btn-xs">呵呵</button>
                </div>
            </div>
        </div>
        <!-- 第二个缩略图 -->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <!-- 圆角边框 -->
            <div class="thumbnail">
                <img src="img/timg.jpg" class="img-responsive"/>
                <div class="caption">
                    <h3 class="bg-info">美女啊</h3>
                    <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
                </div>
                <div class="text-right">
                    <button class="btn btn-success btn-sm">哈哈</button>
                    <button class="btn btn-info btn-xs">呵呵</button>
                </div>
            </div>
        </div>
        <!-- 第三个缩略图 -->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <!-- 圆角边框 -->
            <div class="thumbnail">
                <img src="img/timg.jpg" class="img-responsive"/>
                <div class="caption">
                    <h3 class="bg-info">美女啊</h3>
                    <p class="text-muted">美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
                </div>
                <div class="text-right">
                    <button class="btn btn-success btn-sm">哈哈</button>
                    <button class="btn btn-info btn-xs">呵呵</button>
                </div>
            </div>
        </div>



    </div>



 </div>

</body>
</html>

技术分享

7 下拉菜单

  • class="dropdown-menu" 给下拉列表中的内容加，ul加样式
  • class="dropdown" 包含触发的按钮和下拉列表加样式--父元素
  • class="data-toggle" 按钮的触发器
  • class="dropdown-menu-left" 下拉列表为左对齐
  • class="dropdown-menu-right" 下拉列表为左对齐
  • class="divider" 分割线 给li加，li标签内部没有内容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 下拉列表 -->
 <div class="container" style="background-color:#e6e6e6">
     <h1 class="page-header">下拉列表</h1>

    <div class="">
        <button class="btn btn-default ">
            城市<span class="caret"></span>
        </button>
        <ul >
            <li><a href="#">北京</a></li>
            <li><a href="#">南京</a></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
        </ul>

    </div>
 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 下拉列表 -->
 <div class="container" style="background-color:#e6e6e6">
     <h1 class="page-header">下拉列表</h1>

    <div class="">
        <button class="btn btn-default">
            城市<span class="caret"></span>
        </button>
        <!-- 给ul加上class="dropdown-menu" -->
        <ul class="dropdown-menu">
            <li><a href="#">北京</a></li>
            <li><a href="#">南京</a></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
        </ul>
    </div>
 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 下拉列表 -->
 <div class="container" style="background-color:#e6e6e6">
     <h1 class="page-header">下拉列表</h1>
    <!-- 给ul的父元素加class="dropdown"   -->
    <div class="dropdown">
        <button class="btn btn-default">
            城市<span class="caret"></span>
        </button>
        <!-- 给ul加上class="dropdown-menu" -->
        <ul class="dropdown-menu">
            <li><a href="#">北京</a></li>
            <li><a href="#">南京</a></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
        </ul>
    </div>
 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 下拉列表 -->
 <div class="container" style="background-color:#e6e6e6">
     <h1 class="page-header">下拉列表</h1>
    <!-- 给ul的父元素加class="dropdown"   -->
    <div class="dropdown">
        <!-- 给按钮增加触发器data-toggle="dropdown" -->
        <button class="btn btn-default" data-toggle="dropdown">
            城市<span class="caret"></span>
        </button>
        <!-- 给ul加上class="dropdown-menu" -->
        <ul class="dropdown-menu">
            <li><a href="#">北京</a></li>
            <li><a href="#">南京</a></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
        </ul>
    </div>
 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 下拉列表 -->
 <div class="container" style="background-color:#e6e6e6">
     <h1 class="page-header">下拉列表</h1>
    <!-- 给ul的父元素加class="dropdown"   -->
    <div class="dropdown">
        <!-- 给按钮增加触发器data-toggle="dropdown" -->
        <button class="btn btn-default" data-toggle="dropdown">
            城市<span class="caret"></span>
        </button>
        <!-- 给ul加上class="dropdown-menu" -->
        <ul class="dropdown-menu">
            <li><a href="#">北京</a></li>
            <li><a href="#">南京</a></li>
            <!-- 加分割线class="divider" -->
            <li class="divider"></li>
            <li><a href="#">天津</a></li>
            <li><a href="#">上海</a></li>
            <li><a href="#">杭州</a></li>
        </ul>
    </div>
 </div>
</body>
</html>

技术分享

 

8 标签页

  • class="nav" 给ul加，是标签的基类。
  • class="nav  nav-tabs"
  • class="nav nav-pills" 胶囊式标签页
  • class="nav nav-pills nav-stacked" 横向胶囊式标签页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 标签页 -->
 <div class="container" style="background-color:#e6e6e6">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Profile</a>
        </li>
        <li>
            <a href="#">Messages</a>
        </li>
    </ul>




 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 标签页 -->
 <div class="container" style="background-color:#e6e6e6">
    <ul class="nav nav-tabs">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Profile</a>
        </li>
        <li>
            <a href="#">Messages</a>
        </li>
    </ul>




 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 标签页 -->
 <div class="container" style="background-color:#e6e6e6">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Profile</a>
        </li>
        <li>
            <a href="#">Messages</a>
        </li>
    </ul>




 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 标签页 -->
 <div class="container" style="background-color:#e6e6e6">
    <ul class="nav nav-pills">
        <li class="active">
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Profile</a>
        </li>
        <li>
            <a href="#">Messages</a>
        </li>
    </ul>




 </div>
</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 标签页 -->
 <div class="container" style="background-color:#e6e6e6">
    <ul class="nav nav-pills nav-stacked">
        <li class="active">
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Profile</a>
        </li>
        <li>
            <a href="#">Messages</a>
        </li>
    </ul>




 </div>
</body>
</html>

技术分享

 9 导航

  • class="navbar" 导航栏的基类，用于<nav>标签上。
  • class="navbar navbar-default"  导航栏的默认样式，用于<nav>元素
  • class="navbar container"是<nav>的子元素。导航栏内容都放入其中。
  • class="navbar navbar-header" 导航栏的头部样式。
  • class="navbar navbar-fixed-top" 导航栏固定到顶部，用于<nav>元素。
  • class="navbar navbar-fixed-bottom" 导航栏固定到底部 ，用于<nav>元素。
  • class="navbar navbar-inverse" 可以实现反色导航栏，用于<nav>元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default">

    11111


</nav>

</body>
</html>

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top">

    11111


</nav>
<div class="container">
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>






</div>

</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">

    11111


</nav>
<div class="container">
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>






</div>

</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
    <!-- 使得内容居中显示 -->
    <div class="container">
        <div style="background-color: #ffffff">dddd</div>
    </div>



</nav>
<div class="container">
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>






</div>

</body>
</html>

技术分享

  • class="collapse"是折叠导航栏的样式的基类。一般用于像<ul>标签的父元素上添加此类。
  • class="collapse navbar-collapse" 是折叠导航栏样式。一般用于像<ul>标签的父元素上添加此类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
    <!-- 使得内容居中显示 -->
    <div class="container">
        <!-- 页面的头部 -->
        <div class="navbar-header">
            <a href="#">
                <img src="img/logo.jpg" alt="logo"/>
            </a>
        </div>
        <!-- 导航链接-->
        <div class="collapse navbar-collapse">
           <ul>
               <li>
                   <a href="#">主页</a>
               </li>
               <li>
                   <a href="#">内容</a>
               </li>
               <li>
                   <a href="#">主要业务</a>
               </li>
               <li>
                   <a href="#">联系我们</a>
               </li>
           </ul>
        </div>
    </div>



</nav>
<div class="container">
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>






</div>

</body>
</html>

技术分享

 

  • class="nav" 是导航栏的链接基类，一般是给ul标签添加。
  • class="nav navbar-nav"是导航栏的链接样式。一般给ul标签添加。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
    <!-- 使得内容居中显示 -->
    <div class="container">
        <!-- 页面的头部 -->
        <div class="navbar-header">
            <a href="#">
                <img src="img/logo.jpg" alt="logo"/>
            </a>
        </div>
        <!-- 导航链接-->
        <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav">
               <li>
                   <a href="#">主页</a>
               </li>
               <li>
                   <a href="#">内容</a>
               </li>
               <li>
                   <a href="#">主要业务</a>
               </li>
               <li>
                   <a href="#">联系我们</a>
               </li>
           </ul>
        </div>
    </div>



</nav>
<div class="container">
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>
    <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p> <h3>我家大宝宝</h3>
    <p>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝我家大宝宝 <br/>
        我家大宝宝我家大宝宝
    </p>






</div>

</body>
</html>

技术分享

10 分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
    <!-- 分页 -->
    <div class="">
        <ul>
            <li>
                <a href="#">&laquo;</a>
            </li>
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>


</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
    <!-- 分页 -->
    <div class="">
        <ul class="pagination">
            <li>
                <a href="#">&laquo;</a>
            </li>
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>


</body>
</html>

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap学习</title>
    <!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- 导入bootstrap的css-->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- 导入jQuery -->
    <script type="text/javascript"  src="js/jquery.min.js"></script>
    <!-- 导入bootstrap的js -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <style type="text/css">
    </style>

</head>
<body >
    <!-- 分页 -->
    <div class="">
        <ul class="pagination">
            <li >
                <a href="#">&laquo;</a>
            </li>
            <li class="active">
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">5</a>
            </li>
            <li>
                <a href="#">&raquo;</a>
            </li>
        </ul>
    </div>


</body>
</html>

技术分享

bootstrap 基础（二）

标签：pdo   基本   tar   图标   menu   辅助   ges   one   文字   

原文地址：http://www.cnblogs.com/xuweiweiailixing/p/7505839.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！