bootstrap学习笔记_col bg-danger什么意思-CSDN博客

本文链接：https://blog.csdn.net/beggar_it/article/details/70160157

bootstrap布局容器

<div class="container">固定宽度  1170px</div>
<div class="container-fluid">宽度为 100%</div>

bootstrap排版标签

<h1></h1>  36px
<h2></h2>  30px
<h3></h3>  24px
<h4></h4>  18px
<h5></h5>  14px
<h6></h6>  12px

`.page-header`设置页头，给标题加一个分割线
<h1 class="page-header">hello world</h1>

<small></small>副标题小一号
<big></big>副标题大一号
<strong></strong>推荐使用的加粗
<em></em>推荐使用的
<del></del>删除线

<div class="container">
    <big>《送孟浩然之广陵》</big><br/>
    <small>故人西辞黄鹤楼</small><br/>
   <strong>烟花三月下扬州</strong><br/>
    <em>孤帆远影碧山尽</em><br/>
    <del> 唯见长江天际流</del>
</div>

文本对齐方式

.text-left 左对齐
.text-center居中对齐
.text-right 右对齐

英文大小写

.text-uppercase  大写
.text-lowercase  小写
.text-capitalize 首字母大写

列表

.list-unstyled去掉列表前面的符号，和去掉原有的格式
.list-inline 把<li></li>之间的内容，变成横向排列
<ul class="list-inline list-unstyled">
    <li>PHP</li>
    <li>iOS</li>
</ul>

自定义列表

.dl-horizontal 设置变成横向排列
<dl class="dl-horizontal">
        <dt>PHP</dt>
        <dd>server script</dd>
</dl>

表格

.table 表格的一个基类，如果加其他的样式，都在.tabel的基础上
.table-bordered 给表格加外边框
.table-responsive给table的父元素加以移动设备为优先，如果内容不能完全的显示，会出现滚动条

状态类

状态类设置的是行tr或 td

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

响应式图片

.img-responsive 响应式图片
图片的形状
.img-circle 椭圆形
.img-rounded 圆角矩形
.img-thumbnail 给图片加圆角的边框

栅格系统

栅格系统一定要放入容器中

<div class=”container”></div>
<div class=”container-fluid”></div>

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

如果想做成响应式效果，使用栅格系统参数
- 小于768 手机端 Col-xs-
- 大于768 小于992 平板 Col-sm-
- 大于992 小于1200 Col-md-
- 大于1200 Col-lg-

偏移

偏移 offset
注意：只能向右偏移
语法：col-xs/sm/md/lg-offset-数值
举例：col-md-offset-2 pc中等屏幕向右偏移 2个列

排序

语法：col-xs/sm/md/lg-pull 向左偏移
语法：col-xs/sm/md/lg-push 向右偏移

<div class="row">
    <div class="col-md-4">hello</div>
    <div class="col-md-2 col-md-offset-5">world</div>
</div>

<div class="row">
    <div class="col-md-4">hello</div>
    <div class="col-md-8">world</div>
</div>

<div class="row">
    <div class="col-md-4 col-md-push-8">hello</div>
    <div class="col-md-8 col-md-pull-4">world</div>
</div>

辅助样式

情境文本颜色
- .text-muted(柔和)
- .text-success
- .text-info
- .text-primary
- .text-warning
- .text-danger

背景文本颜色
- .bg-success
- .bg-info
- .bg-primary
- .bg-waring
- .bg-danger

下拉三角
<span class=”caret”></span>

快速浮动
- pull-left 左浮动
- pull-right 右浮动

清除浮动
- .clearfix给父盒子加就相当于<div style=”clear:both”></div>

表单

        <!-- .form-inline表单行内显示 -->
        <form class="form-inline">
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" name="email" id="email" class="form-control">
            </div>
            <div  class="form-group">
                <label for="pwd">密码</label>
                <input type="password" name="pwd" id="pwd" class="form-control">
            </div>
            <div class="form-group">
                <label for="tel">手机号</label>
                <input type="text" name="tel" id="tel" class="form-control">
            </div>

            <!--复选框-->
            <div class="form-group">
                <label class="checkbox-inline"><input type="checkbox" name="hobby" >唱歌</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby" >旅游</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby" >睡觉</label>
                <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled >敲代码</label>
            </div>

            <!--单选框-->
            <div class="form-group">
                <label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
                <label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled="">女</label>
            </div>

            <!--输入框组-->
            <div class="form-group" >
                <div class="input-group">
                    <span class="input-group-addon">搜索</span>
                    <input type="search" name="sc" id="sc" class="form-control">
                </div>
            </div>
            <!--输入框组-->
            <div class="form-group">
                <div class="input-group">
                    <input type="search" name="sear" id="sear" class="form-control">
                    <div class="input-group-addon">查询内容</div>
                </div>
            </div>
            <!--输入框组-->
            <div class="input-group">
                <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span>
                <input type="text" name="username" class="form-control">
            </div>
        </form>

响应式表单

注意：输入框不能使用栅格系统，给

…给这类的标签加

<!-- .form-horizontal响应式表单 -->
 <div class="container" style="background:#e6e6e6;">
   <form class="form-horizontal">
     <div class="form-group">
         <label class="col-md-2 col-sm-2 col-xs-2 text-right" for="username">账号</label>
         <div class="col-md-10 col-sm-10 col-xs-10">
          <input type="text" name="username" id="username" class="form-control">
         </div>
     </div>

      <div class="form-group">
        <label for="pwd" class="col-md-2 col-sm-2 col-xs-2  text-right">密码</label>
        <div class="col-md-10 col-sm-10 col-xs-10">
          <input type="password" name="pwd" id="pwd" class="form-control">
        </div>
      </div>
   </form>
</div>

按钮

<button class="btn btn-primary">登陆</button>
<input type="button" value="修改 " class="btn btn-default">
<a href="#" class="btn btn-danger btn-lg ">修改内容</a>
<a href="#" class="btn btn-warning btn-sm">修改内容</a>
<a href="#" class="btn btn-success btn-xs">修改内容</a>
<a href="#" class="btn btn-success active">修改内容</a>
<a href="#" class="btn btn-danger active ">修改内容</a>

<!--按钮组-->
<div class="btn-group">
    <button class="btn btn-success">按钮内容</button>
    <button class="btn btn-success">修改内容</button>
    <button class="btn btn-success">查询内容</button>
</div>

下拉菜单

.dropdown-menu 给下拉列表中的内容给ul加样式
.dropdown 包含触发的按钮和下拉列表加样式 —父元素
.data-toggle 按钮的触发器
.dropdown-menu-left 下拉列表的对齐
.dropdown-menu-right 右对齐
.divider 给
加
之间没有内容

<div class="dropdown ">
    <button class="btn btn-default" data-toggle="dropdown">
        登录 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">qq登录</a></li>
        <li><a href="#">微信登录</a></li>
        <li class="divider"></li>
        <li><a href="#">邮箱登录</a></li>
        <li><a href="#">手机登录</a></li>
        <li><a href="#">微博登录</a></li>
    </ul>
</div>

logon

标签页

.nav是标签页的一个基类 —给ul加
.nav-tabs 普通标签页
.nav-pills 胶囊式标签页
.nav-stacked垂直排列
.active 给
加默认显示的是哪个标签页内容

<h2>标签页1</h2>
 <ul class="nav nav-tabs">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages</a></li>
 </ul>
<h2>标签页2</h2>
<ul class="nav nav-pills">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages</a></li>
 </ul>
<h2>标签页2</h2>
 <ul class="nav nav-pills nav-stacked">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages</a></li>
 </ul>

导航栏

.navbar：导航栏的基类，用于
元素。
.navbar-default：导航栏默认样式，用于
元素。
.container是
的子元素。导航栏内容都放入其中。
.navbar-header：导航栏头部样式。
.collapse是折叠导航栏的样式的基类。列表
- 父元素加
.navbar-collapse是折叠导航栏样式。给ul的父元素加
.nav是导航栏的链接基类。
.navbar-nav是导航栏的链接样式。
.navbar-left 或 .navbar-right - .navbar-fixed-top：导航栏固定在顶部，用于
元素。需要为设置padding-top:70px
.navbar-fixed-bottom：导航栏固定在底部，用于
元素
.navbar-inverse：可以实现反色导航栏，用于
元素。

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" >
    <div class="container">
        <!--页面的头部-->
        <div class="navbar-header">
            <a href="#"><img src="../images/1.jpg" height="50"></a>
        </div>
        <!--导航链接-->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">iOS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Swift</a></li>
                <li><a href="#">Java</a></li>
            </ul>
        </div>
    </div>
</nav>

分页

<div class="">
    <ul class="pagination">
        <li ><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

pagecontrol