zoukankan      html  css  js  c++  java
  • day 58 关于bootstrap

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--优先使用手机端 viewport 在手机能显示-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>练习</title>
    <!--引用bootstrap 其实就是引用的的是压缩版bootstrap.min.css-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>


    </style>
    </head>
    <body>
    <!--table-bordered 修改颜色-->
    <!--table-hover 鼠标点上去换色-->
    <!--text-center 文本居中-->
    <!--table-condensed 让表格变得更紧凑-->
    <!--以下代表不同的颜色-->
    <!--success-->
    <!--info-->
    <!--warning-->
    <!--danger-->
    <!--table-responsive 响应式表格,-->




    <!--<div class="container">-->
    <!--<table class="table table-bordered table-hover text-center table-condensed">-->
    <!--<thead>-->
    <!--<tr>-->
    <!--<th class="text-center">#</th>-->
    <!--<th class="text-center">姓名</th>-->
    <!--<th class="text-center">爱好</th>-->
    <!--<th class="text-center">操作</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody class="text-center">-->
    <!--<tr class="active">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="success">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="info">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="warning">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="danger">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->

    <!--</tbody>-->
    <!--</table>-->

    <!--<div class="table-responsive">-->
    <!--<table class="table table-striped table-bordered table-hover text-center table-condensed">-->
    <!--<thead>-->
    <!--<tr>-->
    <!--<th class="text-center">#</th>-->
    <!--<th class="text-center">姓名</th>-->
    <!--<th class="text-center">爱好</th>-->
    <!--<th class="text-center">操作</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody class="text-center">-->
    <!--<tr class="active">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="success">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="info">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="warning">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="danger">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->

    <!--</tbody>-->
    <!--</table>-->
    <!--</div>-->
    <!--</div>-->



    <!--form-inline+form-group 实现表单横排显示(Bootstrap)-->
    <!--sr-only (仅供)屏幕阅读器-->
    <!--"exampleInputAmount 例如输入之和-->
    <!--input-group-->
    <!--input-group-addon 输入添加-->
    <!--btn-primary 预定义样式-->
    <!--Transfer cash 现金移转 -->

    <!--<form class="form-inline">-->
    <!--<div class="form-group">-->
    <!--<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>-->
    <!--<div class="input-group">-->
    <!--<div class="input-group-addon">¥</div>-->
    <!--<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">-->
    <!--<div class="input-group-addon">.00000</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<button type="submit" class="btn btn-primary">Transfer cash</button>-->


    <!--</form>-->
    <!--表单出现三行的框-->
    <!--form-control" rows="3 -->
    <!--<textarea class="form-control" rows="3"></textarea>-->


    <!--表单内多选单选 出现disabled-->
    <!--label 内部的让其有关联-->
    <!--label>-->
    <!--<input type="checkbox" value="" disabled="">-->
    <!--Option two is disabled</label>-->

    <!--<form>-->
    <!--<div class="checkbox">-->
    <!--<label>-->
    <!--<input type="checkbox" value="">-->
    <!--Option one is this and that—be sure to include why it's great-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="checkbox disabled">-->
    <!--<label>-->
    <!--<input type="checkbox" value="" disabled="">-->
    <!--Option two is disabled-->
    <!--</label>-->
    <!--</div>-->
    <!--<br>-->
    <!--<div class="radio">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">-->
    <!--Option one is this and that—be sure to include why it's great-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="radio">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">-->
    <!--Option two can be something else and selecting it will deselect option one-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="radio disabled">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">-->
    <!--Option three is disabled-->
    <!--</label>-->
    <!--</div>-->
    <!--</form>-->

    <!--选择2列 下拉选择5个-->
    <!--<div class="col-md-2">-->
    <!--<select multiple class="form-control">-->
    <!--<option>1</option>-->
    <!--<option>2</option>-->
    <!--<option>3</option>-->
    <!--<option>4</option>-->
    <!--<option>5</option>-->
    <!--</select>-->
    <!--</div>-->

    <!--占位符 placeholde-->
    <!--:form-control控件 表单控件-->
    <!--<input class="form-control input-lg" type="text" placeholder=".input-lg">-->
    <!--<input class="form-control" type="text" placeholder="Default input">-->
    <!--<input class="form-control input-sm" type="text" placeholder=".input-sm">-->

    </body>
    </html>


    -------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--优先使用手机端 viewport 在手机能显示-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>练习</title>
    <!--引用bootstrap 其实就是引用的的是压缩版bootstrap.min.css-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>


    </style>
    </head>
    <body>
    <!--table-bordered 修改颜色-->
    <!--table-hover 鼠标点上去换色-->
    <!--text-center 文本居中-->
    <!--table-condensed 让表格变得更紧凑-->
    <!--以下代表不同的颜色-->
    <!--success-->
    <!--info-->
    <!--warning-->
    <!--danger-->
    <!--table-responsive 响应式表格,-->




    <!--<div class="container">-->
    <!--<table class="table table-bordered table-hover text-center table-condensed">-->
    <!--<thead>-->
    <!--<tr>-->
    <!--<th class="text-center">#</th>-->
    <!--<th class="text-center">姓名</th>-->
    <!--<th class="text-center">爱好</th>-->
    <!--<th class="text-center">操作</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody class="text-center">-->
    <!--<tr class="active">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="success">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="info">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="warning">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="danger">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->

    <!--</tbody>-->
    <!--</table>-->

    <!--<div class="table-responsive">-->
    <!--<table class="table table-striped table-bordered table-hover text-center table-condensed">-->
    <!--<thead>-->
    <!--<tr>-->
    <!--<th class="text-center">#</th>-->
    <!--<th class="text-center">姓名</th>-->
    <!--<th class="text-center">爱好</th>-->
    <!--<th class="text-center">操作</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody class="text-center">-->
    <!--<tr class="active">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="success">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="info">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="warning">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->
    <!--<tr class="danger">-->
    <!--<td>1</td>-->
    <!--<td>Alex</td>-->
    <!--<td>烫头</td>-->
    <!--<td>xxx</td>-->
    <!--</tr>-->

    <!--</tbody>-->
    <!--</table>-->
    <!--</div>-->
    <!--</div>-->



    <!--form-inline+form-group 实现表单横排显示(Bootstrap)-->
    <!--sr-only (仅供)屏幕阅读器-->
    <!--"exampleInputAmount 例如输入之和-->
    <!--input-group-->
    <!--input-group-addon 输入添加-->
    <!--btn-primary 预定义样式-->
    <!--Transfer cash 现金移转 -->

    <!--<form class="form-inline">-->
    <!--<div class="form-group">-->
    <!--<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>-->
    <!--<div class="input-group">-->
    <!--<div class="input-group-addon">¥</div>-->
    <!--<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">-->
    <!--<div class="input-group-addon">.00000</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<button type="submit" class="btn btn-primary">Transfer cash</button>-->


    <!--</form>-->
    <!--表单出现三行的框-->
    <!--form-control" rows="3 -->
    <!--<textarea class="form-control" rows="3"></textarea>-->


    <!--表单内多选单选 出现disabled-->
    <!--label 内部的让其有关联-->
    <!--label>-->
    <!--<input type="checkbox" value="" disabled="">-->
    <!--Option two is disabled</label>-->

    <!--<form>-->
    <!--<div class="checkbox">-->
    <!--<label>-->
    <!--<input type="checkbox" value="">-->
    <!--Option one is this and that—be sure to include why it's great-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="checkbox disabled">-->
    <!--<label>-->
    <!--<input type="checkbox" value="" disabled="">-->
    <!--Option two is disabled-->
    <!--</label>-->
    <!--</div>-->
    <!--<br>-->
    <!--<div class="radio">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">-->
    <!--Option one is this and that—be sure to include why it's great-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="radio">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">-->
    <!--Option two can be something else and selecting it will deselect option one-->
    <!--</label>-->
    <!--</div>-->
    <!--<div class="radio disabled">-->
    <!--<label>-->
    <!--<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">-->
    <!--Option three is disabled-->
    <!--</label>-->
    <!--</div>-->
    <!--</form>-->

    <!--选择2列 下拉选择5个-->
    <!--<div class="col-md-2">-->
    <!--<select multiple class="form-control">-->
    <!--<option>1</option>-->
    <!--<option>2</option>-->
    <!--<option>3</option>-->
    <!--<option>4</option>-->
    <!--<option>5</option>-->
    <!--</select>-->
    <!--</div>-->

    <!--占位符 placeholde-->
    <!--:form-control控件 表单控件-->
    <!--<input class="form-control input-lg" type="text" placeholder=".input-lg">-->
    <!--<input class="form-control" type="text" placeholder="Default input">-->
    <!--<input class="form-control input-sm" type="text" placeholder=".input-sm">-->

    </body>
    </html>
    ---------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图片样式</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    </head>
    <body>
    <!--img-rounded 方的-->
    <!--img-circle 圆的-->
    <!--img-thumbnail 边上带个小边框-->
    <!--<div class="container">-->
    <!--<img src="Bootstrap_i2.png" alt="..." class="img-rounded">-->
    <!--<img src="Bootstrap_i2.png" alt="..." class="img-circle">-->
    <!--<img src="Bootstrap_i2.png" alt="..." class="img-thumbnail">-->
    <!--</div>-->

    visible-sm-block
    visible-xs-block
    <div class="visible-xs-block">只有小屏幕才能看见我</div>

    <script src="jquery-3.2.1.min.js"></script>
    </body>
    </html>












  • 相关阅读:
    scrapy xpath 定位节点获取数据
    pandas 获取增量数据
    10秒解决80端口被占用
    VS code 自定义快捷键
    解决npm 的 shasum check failed for错误
    JSON.parse与eval的区别
    display:flex,用这个布局就像开挂了!!!
    几款前端IDE工具:Sublime、Atom、VSCode比较
    npm install -S -D -g 有什么区别
    Vue框架学习——使用nvm下载8.12.0以后版本没有npm文件的解决办法
  • 原文地址:https://www.cnblogs.com/xiaoluoboer/p/8244713.html
Copyright © 2011-2022 走看看