前端学习之 Bootstrap（二）

2022-07-10 17:39:18

一、代码

内联代码：用<code>包裹，但是需要用<和>表示尖括号。
键盘输入：用<kbd>包裹表示键盘输入的内容。
多行代码：用<pre>包裹多行代码，同样需要对尖括号做转义处理。可以使用 .pre-scrollable 类，其作用是固定代码框大小设置 max-height 为 350px ，并在垂直方向展示滚动条
变量：用<var>表示变量
程序输出：<smp>表示程序输出

二、表格

1、基本表格

<table>
    <thead>
        <tr>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
    </tbody>
</table>

2、示例：

一	二	三	四
内容一	内容二	内容三	内容四
内容一	内容二	内容三	内容四

3、Bootsrap表格类

基本表格样式:

定义表格： class="table"表示表格，赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
斑马条纹：通过 .table-striped 类可以给表格体之内的每一行增加斑马条纹样式
表格边框：添加 .table-bordered 类为表格和其中的每个单元格增加边框
悬停高亮：通过添加 .table-hover 类可以让每一行对鼠标悬停状态作出高亮响应
表格紧缩：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

特殊状态：

.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

三、表单

1、基本表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </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>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

2、Bootstrap表单

注意：
1 所有设置了 .form-control 类的输入框，文本框和多选框元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
2 为了可读性和更好的添加各种类属性，尽量将每一个表单控件都单独放在一个div中。
3 为每一个input输入框都要添加label标签，这是为了屏幕阅读器识别表单。即使不想显示label元素，也可使用.sr-only 类将其隐藏。
4 做内联表单，并未input输入框添加图标的时候，需要将span和input标签维持在一个div中，并为div添加input-group类
5 多选框组的每一个多选框都要包裹在一个div中，并且在div添加类checkbox或者radio表示，单选则标签的name需要保持一致
6 反馈图标只能作用在具有form-control的input框上，并且需要在div包裹的内联span和input之外，否则会乱版
正确示例

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

内联表单： .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件
水平排列：为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了
控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度
校验状态：为包裹表单控件的div添加has-success，has-warning，has-error表示不同的状态

四、按钮

一般可用按钮的元素

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

对于a，作为按钮添加了role="button"，此时已完全失去了链接的作用，而在导航的时候，只能使用button作为按钮，所以最好使用button用作按钮

不同状态
- btn-default：默认
- btn-primary：首选项
- btn-success：成功
- btn-info：一般信息
- btn-warning：警告
- btn-danger"：危险
- btn-link：链接
不同尺寸：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
块级按钮：添加btn-block可以使整个按钮占据整个控件

五、练习

简单的登陆页面样式

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        body{
            padding:0;
            margin:0;
        }
        #bg{width:100%;height:100%;position:absolute;z-index:-1;opacity: 0.8}
        #login{position:absolute;left:22.5%;top:40%;margin-left:-150px;margin-top:-100px; }
    </style>
</head>
<body>
<div class="container" id="login">
    <div class="row">
        <div class="text-center"><h3> Please Login</h3></div>
    </div>
    <div class="row table-bordered">
        <div class="col-md-6">
            <h3 class="text-center text-capitalize"> my blog </h3>
            <p>记录点滴，记录成长，Adobe LiveCycle Document Security Server提供了在PDF表单和文档中支持的文档加密和数字签名服务。Adobe LiveCycle Document
                Security Server provides services for document encryption and digital signature support on PDF forms and
                documents</p>
            <blockquote class="blockquote-reverse">
                <p>stay hungry stay foolish<cite title="lincoln">————Ahrabam Lincoln</cite></p>
            </blockquote>
        </div>
        <div class="col-md-6">
            <br>
            <form role="form" class=" form-horizontal">
                <div class="form-group has-feedback">
                    <label for="Email" class="control-label col-md-2">Email：</label>
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-addon" style="BACKGROUND-COLOR: transparent;">@</span>
                            <input type="email" class="form-control" id="Email" placeholder="Email" style="BACKGROUND-COLOR: transparent;"
                                   aria-describedby="EmailHelp" autofocus required>
                        </div>
                        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                        <span class="help-block sr-only" id="EmailHelp">Correct Email</span>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="password4" class="control-label col-md-2">Password：</label>
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-addon" style="BACKGROUND-COLOR: transparent;">&nbsp;=&nbsp;</span>
                            <input type="password" class="form-control" id="password4"
                                   style="BACKGROUND-COLOR: transparent;" placeholder="Password">
                        </div>
                        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    </div>
                </div>
                <div class="col-md-offset-2">
                    <label class="radio-inline">
                        <input type="radio" name="role" value="student" checked> 学生
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="role" value="teacher"> 老师
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="role" value="admin" disabled> 管理员
                    </label>
                    <br>
                    <br>
                    <div class="form-inline">
                        <button class="btn btn-primary" style="BACKGROUND-COLOR: transparent;">登录入口</button>
                        <button class="btn btn-primary" style="BACKGROUND-COLOR: transparent;" disabled>登录入口2</button>
                        <button class="btn btn-link">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<img id="bg" src="./img/1.jpg" alt="..." class="img-rounded img-responsive">
</body>
</html>

码农公寓