bootstrap的使用就是粘粘粘！
直接上代码，知道有哪些功能就好
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!--为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 让手机端和PC端可以自适应--> <meta name="viewport" content="width=device-width,initial-scale=1"> <!--兼容IE浏览器 Compatible兼容--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--统一各种浏览器的不同格式--> <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet"> <title>bootstrap</title> <!--引入bootstrap中css样式文件--> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> </head> <body> <!--引入jQurey文件--> <script src="../jquery-3.2.1.min.js"></script> <!--引入bootstrap中css样式文件--> <script src="../bootstrap/js/bootstrap.min.js"></script> <!--所有的bootstrap都要写在container里面--> <div class="container"> <!--写自己的HTML代码--> </div> </body> </html>
下面描述一些基础知识
一、媒体查询
<title>媒体查询</title> <style> .c1 { background-color: red; } /*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/ @media screen and (max- 600px) { .c1 { background-color: green; } } </style>
二、代码
<div class="container"> <!--内联代码--> 通过 <code><section></code> 标签包裹内联样式的代码片段 <!--用户输入--> <div>通过 kbd 标签标记用户通过键盘输入的内容<kbd>ctrl + ,</kbd></div> <div>拼接键盘码<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></div> <!--代码块--> <pre><p></p>多行代码可以使用 pre 标签。为了正确的展示代码，注意将尖括号做转义处理。</pre> <!--变量:通过 <var> 标签标记变量。--> <var>y</var>=<var>m</var><var>x</var>+<var>b</var> <!--程序输出--> <div> <samp>samp标签用来标记程序输出的内容</samp> </div> </div>
三、栅格系统
<body> <!--引入jQurey文件--> <script src="../jquery-3.2.1.min.js"></script> <!--引入bootstrap中css样式文件--> <script src="../bootstrap/js/bootstrap.min.js"></script> <div class="cl">你好，世界</div> <!--布局容器:.container 类用于固定宽度并支持响应式布局的容器。--> <div class="container"> <!--栅格系统--> <div class="row"> <!--col-md- 当大于(≥992px)这些阈值时将变为水平排列C--> <!--应用：从堆叠到水平排列--> <div class="col-md-3">111</div> <div class="col-md-4">222</div> <div class="col-md-5">333</div> </div> <!--col-xs- (<768px)总是水平排列--> <!--应用：移动设备和桌面屏幕--> <div class="row"> <div class="col-xs-1">444</div> <div class="col-xs-10">555</div> <div class="col-xs-1">666</div> </div> <!--应用：手机、平板、桌面--> <div class="row"> <!--不同的屏幕大小试用不同的列数--> <div class="col-xs-12 col-sm-6 col-md-8">hellow world</div> <div class="col-xs-6 col-md-4">蓝色海洋</div> </div> <!--列偏移--> <div class="row"> <div class="col-md-2">不偏移占一列</div> <div class="col-md-8 col-md-offset-2">像右列偏移2列：offset-2</div> </div> <!--嵌套列--> <div class="row" > <div class="col-md-8" style="border: 1px solid blue">占八列 <div class="row"> <div class="col-md-3" style="border: 1px solid black">嵌套内占2列</div> </div> </div> </div> <!--列排序--> <!--通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。--> <div class="row"> <div class="col-md-9 col-md-push-3">向右推3列</div> </div> <div class="row"> <div class="col-md-4 col-md-pull-1">向左拉1列</div> </div> </div> </body>
四、排版（内容较多）
<body> <script src="../jquery-3.2.1.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> <div class="container"> <!--标题--> <!--HTML 中的所有标题标签，<h1> 到 <h6> 均可使用<h1>h1. Bootstrap heading</h1>--> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> <!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。--> <h1>h1. Bootstrap heading <small>h1的副标题</small></h1> <!--页面主体--> <!--Bootstrap 将全局 font-size 设置为 14px --> <p> （段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin） variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。 </p> <span> Bootstrap 将全局 font-size 设置为 14px 被删除的文本:对于被删除的文本使用 del 标签。无用文本:对于没用的文本使用 s标签。插入文本 额外插入的文本使用 ins 标签; 带下划线的文本:为文本添加下划线，使用 u 标签。小号文本:对于不需要强调的inline或block类型的文本，使用 small 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 small 元素被设置不同的 font-size </span> <!--中心内容--> <p class="lead">通过添加 .lead 类可以让段落突出显示</p> <!--内联文本元素--> <mark>highlight显示高亮</mark> <del>被删除的文本</del> <s>无用文本</s> <ins>插入文本</ins> <u>带下划线的文本</u> <small>小号文本</small> <strong>着重文本</strong> <em>用斜体强调一段文本</em> <!--文本对齐--> <p class="text-left">左对齐</p> <p class="text-right">右对齐</p> <p class="text-center">居中对齐</p> <p class="text-justify">对齐的文本</p> <p class="text-nowrap">没有换行文字</p> <!--改变大小写--> <p class="text-lowercase">Xioa Xie</p> <p class="text-uppercase">da xie</p> <p class="text-capitalize">add首字母大写</p> <!--缩略语abbr:当鼠标悬停在缩写和缩写词上时就会显示完整内容--> <abbr title="缩略语">abbr</abbr> <!--首字母缩略语initialism--> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> <!--地址address--> <address> <strong>zzy</strong><br> 沙河地铁口<br> <abbr title="phone">p:</abbr>17610143051<br> </address> <address> <strong>全名：朱兆筠</strong> <a href="">983925897@.qq.com</a> </address> <!--引用--> <!--默认样式的引用--> <!--将任何 HTML 元素包裹在 <blockquote>(块引用) 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签--> <blockquote> <p>默认样式的引用</p> </blockquote> <!--多种引用样式--> <blockquote> <p>标准样式的块引用</p> <footer>footer用来标明引用的来源 <cite title="Source Title">cite来源的名称</cite></footer> </blockquote> <!--另一种展示风格--> <blockquote class="blockquote-reverse"> 通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果 <footer>朱兆筠<cite></cite>凤凰</footer> </blockquote> <!--列表--> <!--无序列表--> <ul> <li>...</li> </ul> <!--有序列表--> <ol> <li>...</li> </ol> <!--无样式列表--> <ul class="list-unstyled"> <li>无样式列表：这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。</li> </ul> <!--内联列表--> <ul class="list-inline"> <li>第一个li</li> <li>第二个li (内联列表：通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行)</li> </ul> <!--描述：带有描述的短语列表--> <dl> <dt>Description lists着重文字</dt> <dd>描述性列表非常适合定义术语</dd> </dl> <!--水平排列的描述 horizontal （横）--> <dl class="dl-horizontal"> <dt>.dl-horizontal 可以让 dl 内的短语及其描述排在一行</dt> <dd>自动截断 通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。</dd> <dt>zzy</dt> <dd>种花</dd> </dl> </div> </body>
五、表格
<div class="container"> <!--基本实例:为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 --> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th>方法</th> <th>描述</th> <th>年龄</th> </tr> </thead> <tbody> <tr class="success"> <td>.success</td> <td>标识成功或积极的动作</td> <td>18</td> </tr> </tbody> <tbody> <tr class="active"> <td>.active</td> <td>鼠标悬停在行或单元格上时所设置的颜色</td> <td>38</td> </tr> </tbody> <tbody> <tr class="warning"> <td>.warning</td> <td>标识警告或需要用户注意</td> <td>28</td> </tr> </tbody> <tbody> <tr class="danger"> <td>.danger</td> <td>标识危险或潜在的带来负面影响的动作</td> <td>48</td> </tr> </tbody> </table> <!--条纹状表格:通过 .table-striped(条纹) 类可以给 <tbody> 之内的每一行增加斑马条纹样式。--> <!--带边框的表格:.table-bordered--> <!--鼠标悬停:通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。--> <!--紧缩表格:通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半--> <!--状态类 :通过这些状态类可以为行或单元格设置颜色。--> </div>
六、表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <title>zzy表单作业</title> </head> <body> <script src="../jquery-3.2.1.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> <div class="container"> <div class="page-header"> <h1>信息收集卡 <small>共三步</small> </h1> </div> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 33%">1/3 <span class="sr-only">45% Complete</span> </div> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">基础信息<span class="glyphicon glyphicon-pushpin pull-right"></span> </h3> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" id="inputEmail3" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">手机</label> <div class="col-sm-4"> <input type="text" class="form-control" id="inputPassword3" placeholder="手机"> </div> </div> <div class="form-group"> <label for="inputEmail4" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-4"> <input type="email" class="form-control" id="inputEmail4" placeholder="邮箱"> </div> </div> <div class="form-group"> <label for="inputPassword5" class="col-sm-2 control-label">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" id="inputPassword5" placeholder="密码"> </div> </div> <div class="form-group"> <label for="inputEmail6" class="col-sm-2 control-label">头像</label> <div class="col-sm-10"> <input type="file" id="inputEmail6"> <p class="help-block">只支持png，jpg，gif格式</p> </div> </div> <hr> <div class="form-group"> <label class="col-sm-2 control-label">属性</label> <div class="col-sm-10"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 你是好人 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 你是坏人 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> 你不是个人 </label> </div> </div> </div> </form> </div> </div> <button type="button" class="btn btn-success pull-right">下一页</button> </div> </body> </html> <!--class="form-control"-->