Bootstrap学习笔记(二)

96
Mr_欢先生
2017.11.02 11:45* 字数 458

7.响应式表单

.form-group表单组样式:将<lable>和表单元素包含其中,可以获得更好的排列
.form-control表单元素样式:常用于<input>、<textarea>、<select>元素
<form>
        <div >
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="email" class="form-control" id="password" placeholder="请输入密码">
        </div>
    </form>
.form-inline内联表单样式(用于form表单):可以使元素一行显示
<form class="form-inline">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="email" class="form-control" id="password" placeholder="请输入密码">
        </div>
    </form>
.input-group-addon 在一侧加入附加内容
<div class="input-group">
            <span class="input-group-addon"> 搜索</span>
            <input type="search" class="form-control" id="password" placeholder="输入搜索内容">
        </div>
.checkbox-inline.radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
.btn-lg.btn-sm.btn-xs 就可以获得不同尺寸的按钮。
.btn-success等可以设置按钮样式 — 如下图
按钮样式
 <form class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 control-label" class="col-md-2 control-label" for="username">用户名:</label>
            <div class="col-md-10">
                <input class="form-control" type="text" id="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="password">密码:</label>
            <div class="col-md-10">
                <input class="form-control" type="text" id="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">上传图片:</label>
            <div class="col-md-10">
                <input type="file">
                <p class="help-block">上传图片格式:.png</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">专业课程:</label>
            <div class="checkbox col-md-10">
                <label class="checkbox-inline">
                    <input type="checkbox">软件工程
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox">软件测试
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox">java程序设计
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox">计算机网络
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">年级:</label>
            <div class="radio col-md-10">
                <label class="radio-inline">
                    <input type="radio">大一
                </label>
                <label class="radio-inline">
                    <input type="radio">大二
                </label>
                <label class="radio-inline">
                    <input type="radio">大三
                </label>
                <label class="radio-inline">
                    <input type="radio">大四
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="info">个人简介:</label>
            <div class="col-md-10">
                <textarea rows="8" class="form-control" placeholder="请输入个人简介" id="info"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-success btn-group-sm">提交</button>
            </div>
        </div>
    </form>

8.柵格系统

栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

<div class="container">
    <div class="row">
        <div class="col-md-12" style="height: 300px;background: gray">
        </div>
    </div>
    <div class="row">
        <div class="col-md-8" style="height: 500px;background: mediumpurple">
            <div class="row">
                <div class="col-md-4" style="height: 500px;background: deepskyblue">
                </div>
                <div class="col-md-4" style="height: 500px;background: hotpink">
                </div>
                <div class="col-md-4" style="height: 500px;background: palegoldenrod">
                </div>

            </div>
        </div>
        <div class="col-md-4" style="height: 500px; background: paleturquoise">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 100px;background: black">
        </div>
    </div>
</div>

9.图片样式

.img-responsive 类可以让图片支持响应式布局
.img-rounded圆角图片、.img-circle圆图片、.img-thumbnail边框圆角
<div class="container" style="background-color: white;padding: 50px;">
    <div>
        ![](img/img.jpg)
        ![](img/img.jpg)
        ![](img/img.jpg)
    </div>
</div>

10.辅助类

1.情境文本颜色

通过颜色来展示意图,Bootstrap 提供了一组工具类。

<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>
2.情境背景色

和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。

<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>
3.快速浮动

通过添加一个类,可以将任意元素向左或向右浮动

  <div class="pull-left bg-danger">...</div>
<div class="pull-right bg-info">...</div>

11.下拉菜单

.dropdown将下拉菜单触发器和下拉菜单都包裹在其中
.data-toggle属性:下拉菜单触发器,在按钮上,内容取值'dropdown'
.dropdown-menu 给<ul>指定下拉菜单的样式
.divider为下拉菜单添加分隔符
<div class="dropdown">
       <button type="button" class="btn btn-success" data-toggle="dropdown">
           菜单按钮 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="#">javaEE</a></li>
           <li><a href="#">html设计</a></li>
           <li><a href="#">mysql应用</a></li>
           <li><a href="#">php应用</a></li>
           <li class="divider"></li>
           <li><a href="#">c++应用</a></li>
           <li><a href="#">软件测试</a></li>
       </ul>
   </div>

12.按钮组

.btn-group:按钮组(可实现将一组按钮放在同一行)
.btn-toolbar按钮工具栏 将多个按钮组放在其中
<div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-primary btn">按钮</button>
            <button type="button" class="btn-danger btn">按钮</button>
        </div>
        <div class="btn-group ">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
        </div>
        <div class="btn-group btn-group-lg btn-group-vertical">
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
            <button type="button" class="btn-success btn">按钮</button>
        </div>
    </div>
上篇:Bootstrap学习笔记(一)
Bootstrap学习笔记
Web note ad 1