bootstrap入门步骤

最新推荐文章于 2024-06-16 09:46:41 发布

剽悍六杯茶

最新推荐文章于 2024-06-16 09:46:41 发布

阅读量2.6k

点赞数 7

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/nikita1995/article/details/52063741

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

bootstrap入门

bootstrap其实是一个项目或者叫做框架
是能制作自适应平台一个页面可以自动根据显示设备的分辨率调整显示方式

1.超大分辨率显示器1920
2.普通1024–1920
3.ipad768X1024
4.手机

开发工具：eclipse netbeans vs webstrom

1.将bootstrap下载到本地解压缩
http://www.bootcss.com

Bootstrap把设备屏幕分辨率分为几种
@media (min-width: 1200px)
@media screen and (max-width: 767px)
@media (min-width: 768px)
@media (max-device-width: 480px) and (orientation: landscape)

bootstrap是将设备进行大小分别之后，对每种设备写好了一些基本样式，我们只需要重构
bootstrap将屏幕分割为12个等宽的列 每一个列是col-md-1  根据内容需要进行列的重新分配
    三个两列 一个六列  三个col-md-2  一个col-md-6
    只要为列的屏幕选择了适应
col-md-*普通分辨率
col-xs-*
col-lg-*
col-sm-*手机

Bootstrap 将设备进行了大小分别之后，对应每种设备写好了一些基本的样式，我们只需要重构

Bootstrap将屏幕分割为12个等宽的列。

对于普通的PC端，每一个列是一个col-md-1
要为对应的屏幕选择了对应的列的类型，永远不会有横向滚动条
因为bootstrap 会让css样式自动适应屏幕。

要为对应的屏幕选择了对应的列的类型，永远不会有横向滚动条，因为bootstrap 会让css样式自动适应屏幕。

app(andriod ios html 5)
用户数量：产品（快，预付款避免产品未出就死（拨号上网））圈钱改版
ASDL
PHP

bootstrap版本差异
bootstrap文件结构：1：bootstrap.css：没有进行优化的css样式文件便于我们进行开发
2：bootstrap.maincss：优化过的css样式用于产品成型之后
3：botstrap.js：JavaScript文件
4：bootstrap.main.js：产品成型后使用的js文件
5： bootstrap如果想使用js特效必须依赖于jquery并且jquery要在bootstrap.js之前导入
js文件作用：特效
banner播放：鼠标点景文本框，文本框提示消失点击菜单出现下拉菜单
导入jquery文件版本要匹配

bootstrap工作原理
1:一个屏幕等分为12列通过控制12个列进行布局设计

2：已经给出了很多好的效果，只需要调用他的类样式

bootdtrap的类样式：使用container默认居中

bootstrap：form table
banner图片切换 javascript编写做成了模块可以直接使用

设置a标签的hover时不要给其加入行内样式否则会无显示

table：多用于后台管理

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap第一课</title>

<!-- 导入bootstrap的css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">

<!-- js文件一定要在jquery文件之前导入 且必须在bootstrap.js文件之前,且版本必须匹配 最好放在最下面最后加载-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/jquery-3.1.0.min.js"></script>

<style>
    /*重构  */
    .container{margin:0;}
    .row{padding:0;margin:0;}
    .col-md-1{border:solid red 1px;}
    </style>


</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                bootstrap第一个模块
            </div>
            <div class="col-md-4">
                bootstrap第二个模块
            </div>

            <div class="col-md-4">
                bootstrap第三个模块
            </div>

        </div>
    </div>
    <hr/>




    <div class="container">
        <div class="row">
            <div class="col-md-1">
            1
            </div>
            <div class="col-md-1">
            2
            </div>
            <div class="col-md-1">
            3
            </div>
            <div class="col-md-1">
            4
            </div>
            <div class="col-md-1">
            5
            </div>
            <div class="col-md-1">
            6
            </div>
            <div class="col-md-1">
            7
            </div>
            <div class="col-md-1">
            8
            </div>
            <div class="col-md-1">
            9
            </div>
            <div class="col-md-1">
            10
            </div>
            <div class="col-md-1">
            11
            </div>
            <div class="col-md-1">
            12
            </div>

        </div>
    </div>
    <hr/>


    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <img src="images/huoying.jpg" class="img-responsive"/>
                bootstrap第一个模块
            </div>
            <div class="col-sm-4">
                bootstrap第二个模块
            </div>

            <div class="col-sm-4">
                bootstrap第三个模块
            </div>

        </div>
    </div>

</body>
</html>

导航栏代码

<!--导航栏  -->
        <nav class="navbar navbar-default hidden-xs navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="">微创圈</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div><!-- navbar-collapse -->
            </div>
        </nav>

banner图片切换代码

<!--banner图片（可切换）  -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  >
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox" >
                <div class="item active">
                  <img src="images/huoying.jpg" alt="第一张图片" title="no1" style="width:100%;height:600px;">
                  <div class="carousel-caption"><!--capation:标题字幕  -->
                       <p>火影忍者1</p>
                  </div>
                </div>
                <div class="item">
                  <img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
                  <div class="carousel-caption">
                    <p>火影忍者2</p>
                  </div>
                </div>
                <div class="item">
                  <img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
                  <div class="carousel-caption">
                    <p>火影忍者3</p>
                  </div>
                </div>
                <div class="item">
                  <img src="images/huoying.jpg" alt="..." style="width:100%;height:600px;">
                  <div class="carousel-caption">
                    <p>火影忍者4</p>
                  </div>
                </div>
              </div>
            </div>
          <!-- Controls 控制左右翻滚 -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

表格一般后台使用表格前端尽量不要使用

<!-- 表格 -->
        <div class="container">
            <div class="row">
                <table class="table table-bordered table-hover table-responsive">
                    <thead>
                        <tr class="warning">
                            <th>ID</th>
                            <th>nanme</th>
                            <th>sex</th>
                            <th>address</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>nikita</td>
                            <td>女</td>
                            <td>襄阳HDAKSJHKLSDHJFLAKSJHDFLAKSDHJLAJ</td> 
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>nikita</td>
                            <td>女</td>
                            <td>襄阳</td> 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>nikita</td>
                            <td>女</td>
                            <td>襄阳</td> 
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>nikita</td>
                            <td>女</td>
                            <td>襄阳</td> 
                        </tr>
                    </tbody>

                    <!--两种方法做分页显示  -->
                    <tfoot>
                        <tr class="active">
                            <td colspan="4" class="text-center" >
                                <nav>
                                  <ul class="pagination pagination-lg">
                                    <li>
                                      <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                      </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="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                      </a>
                                    </li>
                                  </ul>
                                </nav>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" > 
                                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups" style="margin:0 auto;width:300px;">
                                      <div class="btn-group">
                                        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span></button>
                                      </div>
                                      <div class="btn-group" role="group" aria-label="First group">
                                        <button type="button" class="btn btn-default">1</button>
                                        <button type="button" class="btn btn-default">2</button>
                                        <button type="button" class="btn btn-default">3</button>
                                        <button type="button" class="btn btn-default">4</button>
                                      </div>
                                      <div class="btn-group">
                                        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span></button>
                                      </div>                     
                                </div>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

form表单

<!-- form表单 -->
        <!-- <div class="container"> --> <!--  不加container的居中-->
            <div class="row">
                <div class="col-md-3">
                </div>
                <div class="col-md-6">
                    <form action="" >
                        <div class="form-group">
                            <label for="ExampleInputEmail">用户名</label>
                            <input type="text" name="username" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label>Email:</label>
                            <input type="email" name="stuemail" placeholder="email" class="form-control" />
                        </div>

                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <input type="file" id="exampleInputFile" >
                            <p class="help-block">Example block-level help text here.</p>
                        </div>

                        <div class="checkbox">
                            <label><input type="checkbox"> Check me out</label>
                            <label><input type="checkbox"> Check me out</label>
                          </div>

                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </div>
                <div class="col-md-3">
                </div>
            </div>
        <!-- </div> -->

底部

<!-- 底部 -->
        <style>
            .list-group-item{border:0;padding:6px 10px;}
        </style>

        <div class="row" style="border-top: solid #ccc 1px;margin-top:100px;">
            <div class="container" >
                <div class="col-md-5" >
                    <h4>老彭的学堂</h4>
                    <p>哈法拉克的合法开始就打发就开始对符合哈佛卢卡斯的合法开始哈佛路看到和法律考试的机会</p>
                </div>
                <div class="col-md-7">
                    <div class="col-md-4">
                        <ul class="list-group">
                            <li class="list-group-item"><h4>友情链接</h4></li>
                            <li class="list-group-item">华中师范大学</li>
                            <li class="list-group-item">华中科技大学</li>
                            <li class="list-group-item">武汉科技大学</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="list-group">
                            <a href="" class="list-group-item"><h4>友情链接</h4></a>
                            <a href="" class="list-group-item">华中师范大学</a>
                            <a href="" class="list-group-item">华中师范大学</a>
                            <a href="" class="list-group-item">华中师范大学</a>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

剽悍六杯茶

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
bootstrap入门步骤

bootstrap入门bootstrap其实是一个项目或者叫做框架是能制作自适应平台一个页面可以自动根据显示设备的分辨率调整显示方式1.超大分辨率显示器1920 2.普通1024–1920 3.ipad768X1024 4.手机开发工具：eclipse netbeans vs webstrom1.将bootstrap下载到本地解压缩 http://www.boo
复制链接

扫一扫

专栏目录