Bootstrap学习手册

最新推荐文章于 2023-06-03 18:00:00 发布
MindMrWang
最新推荐文章于 2023-06-03 18:00:00 发布
阅读量482
点赞数 1
分类专栏：前端学习文章标签： bootstrap
本文链接：https://blog.csdn.net/qq_39266910/article/details/78476749
版权
前端学习专栏收录该内容
1 篇文章 0 订阅
订阅专栏
bootstrap 笔记

1.css样式
    1）栅格系统
    2）排版
    3）代码
    4）表格
    5）表单
    6）按钮
    7）图片
    8）辅助类
    9）响应式工具


2.css组件
    1）glyphicons图标
    2）下拉菜单
    3）按钮组
    4）输入框组
    5）导航
    6）导航条
    7）路径导航
    8）分页
    9）标签
    10）徽章
    11）巨幕
    12）页头
    13）缩略图
    14）警告框
    15）进度条
    16）媒体对象
    17）列表组
    18）面板
    19）响应式嵌入内容
    20）well



3.js插件
    1）模态框
    2）下拉菜单
    3）滚动监听
    4）标签页
    5）工具提示
    6）弹出框
    7）警告框
    8）按钮
    9）折叠效果
    10）幻灯片效果
    11）固定侧面栏


------------------------------------------------
1.bootstrap安装
2.bootstrap全局CSS样式
3.bootstrap CSS组件
4.bootstrap javascript插件

bootstrap安装:
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.js"></script>

html5文档类型:
<!doctype html>

移动端设备的真实宽度:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器:
.container

栅格系统:
.row 一行12列
.col-md-4 占3列的宽

排版:
1.标题(.page-header)//标题样式
2.段落(.lead)//加粗
3.mark标记
    <mark></mark>
4.del删除线
    <del></del>
5.small小号字体
    <small></small>
6.文本对齐
    .text-right
    .text-left
    .text-center

7.文本大小写
    .text-lowercase ：小写
    .text-uppercase ：大写
    .text-capitalize：首字母大写

8.无样式列表
    .list-unstyled(去除列表前面的序号和点点)
9.内联列表

10.自定义列表
    <dl>
        <dt>选择题:</dt>   
        <dd>A: linux</dd>
        <dd>A: linux</dd>
        <dd>A: linux</dd>
        <dd>A: linux</dd>
    </dl

11.水平排列列表 
    .dl-horizontal

代码:
    1.code
    2.pre
    3.kbd

表格:
    table
    table-striped
    table-bordered
    table-hover

表格颜色:
    .info
    .success
    .active
    .warning
    .danger


响应式表格：
    <div class="table-responsive">
        <table class="table">
        </table>
    </div>

按钮：
    .btn //灰色按钮
    .btn-default  //灰色响应按钮
    .btn-primary //深蓝色
    .btn-success// 绿色
    .btn-info  //淡蓝色
    .btn-warning//橙色
    .btn-danger//红色
    .btn-link // 超链接

按钮大小：
    .btn-lg
    .btn-default
    .btn-sm
    .btn-xs
    块按钮：
    .btn-block

属性：
    disabled=“disabled”使得它没法点的动（禁用按钮）

    a链接
    <input type="submit"/>,
    <input type="reset"/>
    <input type="button"/>
    也可以添加这些属性来使得它变成按钮。


图片样式：
    .img-rounded :圆角
    .img-circle :圆
    .img-thumbnail ：边角白色（图片背景不为白的时候使用）
    <img src="" class="">


辅助类：
    文本颜色：
    .text-muted 灰色
    .text-primary 蓝色
    .text-success 绿色
    .text-info 淡蓝色
    .text-warning 橙黄色
    .text-danger 红色

    文本背景颜色：
    .bg-primary
    .bg-success
    .bg-info
    .bg-warning
    .bg=danger


关闭按钮：
    .close

更多下三角：
    .caret(用在按钮上)

浮动：
    .pull-right/ .pull-left


清除浮动：.clearfix



让内容居中：
    .center-block(让块标签居中)

显示和隐藏：
    .show
    .hide


---------------------
css组件：

字体图标：
    Glyphicons 
    .glyphicons .glyphicon-xxx
    .glyphicons .glyphicon-triangle-right

下拉菜单：

    .dropdown 
    .dropup
    .drop-menu
    date-toggle='dropdown'
<div class="dropdown">
    <button class="btn btn-primary" date-toggle='dropdown'>
    更多信息<span class='caret'></span>
    </button>
    <ul class='dropdown-menu'>
        <li class=‘dropdown-header’><a href="xxx"></a></li>
        <li class='divider'></li>
        <li><a href="xxx"></a</li>
        <li><a href="xxx"></a</li>
        <li class="disabled"><a>xxx</a></li>
    </ul>
</div>


.dropdown-header标题
.divider 分割线
.disabled 禁用

按钮组:
    .btn-group
    .btn-toolbar：更大的按钮排

尺寸：
    .btn-group-lg
    .btn-group-sm
    .btn-group-xs


    <div class="btn-group">
        <button class="btn btn-default"></button
        <button class="btn btn-default"></button
    </div>
嵌套
.dropdown-toggle



按钮组垂直排列：
    .btn-group-vertical

两端对齐的按钮组：
    .btn-group-justified
放在外层的div中，然后里面的每个按钮组只有一个按钮


按钮组+下拉菜单：
<div class="btn btn-group">
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary dropdown-toggle" date-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li></li>
    <li></li>
    <li></li>
        </ul>
</div>


表单：
.form-group +has-success/has-error/has-info(表单框的颜色)
.from-control
.checkbox/.checkbox-inline(这个放在label里，label内放入input和选项)
.radio
.from-inline
.input-group
.input-group-addon
.from-horizontal
.control-label
.form-control-static 静态的值，这个放在p标签内
[disabled]：禁用
[readonly]：只读
filedset标签，在里面添加以上两个属性，禁用全局。
.input-lg(表单框的尺寸)
.input-sm
.help-block 表单下的提示


<from action="">
    <div class="from-group">
        <lable for="">用户名：</lable>
        <input type="text" class="form-control" placeholder="username"/>
    </div>
    <div class="from-group">
        <lable for="">密码：</lable>
        <input type="text" class="form-control" placeholder="password"/>
    </div>

    <div class="from-group">
        <lable for="">留言：</lable>
        <textarea name="" id="" cols="" rows="" class="from-control">
        </textarea>
    </div>

    <div class="from-group">
        <select name="" id="" class="from-control">
        <option value="">xxx</value>
        <option value="">xxx</value>
        <option value="">xxx</value>
        </select>
    </div>

    <div class="from-grop"><
    <input type="submit" value="提交" class="btn btn-primary"/>
    <input type="reset" value="重置" class="btn btnprimary"/>
    /div>
</from>

多选框：
    <div class="from-group">
        <label for="">爱好</lable>
        <div class="checkbox">
            <label>
            <input type="checkbox" name="" id="">篮球
            </label>
        </div>
        <div class="checkbox">
            <label>
            <input type="checkbox" name="" id="">篮球
            </label>

    </div>

文件上传框：//不建议使用
    <div class="form-group">
        <label for="">文件上传：</label>
        <input type="file" name="" id="" class="from-control"/>
    </div>

内联表单：使得表单成为一排
    <from action="" class="from-inline">


输入框组：
    <div from-group>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control"/>
            <div class="input-group-addon">$</div>
        </div>
    </div>

水平排列的表单：（使得用户名，密码和输入框在同一水平上）
    <from class="from-horizontal">
        <div class="from-group">
            <label for="" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="from control" placeholder="username"/>
            </div>
        </div>

        <div class="from-group">
            <label for="" class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-10">
                <input type="password" class="from control" placeholder="password"/>
            </div>
        </div>
    </from>




输入框组：
.input-group
.input-group-btn

<from action="" class="from-horizontal">
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="from-control">
    </div>
</from>

输入框嵌入按钮：
    <from action="">
        <div class="input-group">
            <input type="text" class="from-control">
            <div class="input-group-btn">
                <button class="btn btn-primary">GO</button>
            </div>
        </div>
    </form>



导航：
    .nav
    .nav-tabs
    .nav-pils
    .nav-stacked 导航堆叠

导航条:
.navbar
.navbar-default
.navbar-inverse
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-header
.navbar-brand
.navbar-nav
.navbar-form
.navbar-btn
.navbar-text
.navbar-link
.navbar-left
.navbar-right

路径导航:
.breadcrumb

分页效果:
.pagination

上下页:
.pager

标签:
.label
.label-primary
.label-success
.label-info
.label-warning
.label-danger

徽章:
.badge

巨幕:
.jumbotron

缩略图:
.thumbnail

警告框:
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger

进度条:
.progress
.progress-bar
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active 使得条纹动
<div class="progress">
    <div class="progress-bar progress-bar-success" style='width:90%'>
    90%
    </div>
</div>

媒体对象:
.media
.media-left
.media-object
.media-body
.media-heading
.media-right
.media-top|middle|bottom

列表组:
.list-group
.list-group-item

面板:
.panel
.panel-primary
.panel-heading
.panel-title
.panel-body
.panel-footer

内嵌框架:
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-item

well:
.well
.well-lg
.well-sm

bs jquery插件:
-----------------------------------------------------------
弹框:
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer



滚动监听:
data-spy='scroll' 
data-target='#mynav' 
data-offset='150'

[自定义滚动监听实例]

标签页:
[data-toggle='tab']
.tab-content
.tab-pane
.active
.fade
.in

折叠效果:
[data-toggle="collapse"]
[data-parent='#accordion']
.panel-collapse
.collapse
.panel-group

幻灯片:
.carousel
.slide
[data-ride='carousel']
.carousel-inner
.item
.active
.carousel-indicators
[data-slide-to='0']
.left
.carousel-control
[data-slide='prev']
[data-slide='next']

affix固定:
[data-spy="affix"]
MindMrWang
关注
1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习手册

bootstrap 笔记1.css样式 1）栅格系统 2）排版 3）代码 4）表格 5）表单 6）按钮 7）图片 8）辅助类 9）响应式工具2.css组件 1）glyphicons图标 2）下拉菜单 3）按钮组 4）输入框组 5）导航 6）导航条 7）路径导航 8
复制链接

扫一扫