boostrap

Posted 2020-09-02 大洋与小样

media 根据不同的屏幕大小,选择不同的CSS文件

<link  rel="stylesheet"  type="text/css"  media="screen and (max-width:500px)"  href="small.css">

<link  rel="stylesheet"  type="text/css" media="screen and (min-width:500px)"  href="large.css">

Bootstrap----部分类名的应用

颜色类名:  -danger红   -warning黄   -success绿   -info信息蓝   -primary主要蓝 (前面加上相关基本类名 eg:  btn-danger 按钮是红色)

文本:

文本位置:  居中 text-center , 居右 text-right , 居左 text-left , 两端对齐 text-justify (IE  支持的浏览器不多)

大小写: 大写 text-uppercase  小写 text-lowercase   首字符大写  text-capitalize

突出强调 lead       不换行 text-nowrap

文本颜色:  红色字体text-danger   ......  柔和灰  text-muted

背景颜色: bg-danger   bg-warning  bg-success  bg-info  bg-primary

列表:  

无样式  list-unstyled     行内 list-inline

table基本表格样式:

每个类名是一种效果,它们之间需要组合使用   

class=" table  table-bordered  table-striped  table-hover "        table-striped  表示隔行有条纹

按钮:

类型大小:  btn-lg 大   btn  基本按钮样式     btn-sm  小按钮    btn-xs  小小按钮

按钮颜色:  btn-danger   ......  btn-link 

按钮分组: btn-group

活跃的 active    禁止点击 disabled    关闭  close(向右浮动)    (×) &times;    <button class="btn close"> &times; </button>

左右浮动:   pull-left    pull-right           清除浮动:   clearfix

显示与隐藏:    show     hidden

响应式:   大屏显示 visible-lg-inline      大屏隐藏 hidden-lg        三种后缀:  inline     block   inline-block

263个图标的类:

要放图标: glyphicon  哪个类型 :glyphicon-waining-sign   效果图:

分页:     用ul-li 标签写,

<ul class="pagination pagination-lg">    

<li>标签内部放<a>标签  eg:  <li><a href="">&lang;</a></li>  <li><a href="">1</a></li> <li><a href="">&rang;</a></li>

翻页:    用ul-li 标签写,

<ul class="pager"> 
<li>标签内部放<a>标签  eg:  <li><a href="">上一页</a></li>

对齐翻页:   用ul-li 标签写,

<ul class="pager">
<li>标签内部放<a>标签  eg:  <li  class="previous"><a href="" >上一页</a></li>

                                             <li  class="next"><a href="" >上一页</a></li>

徽章:   badge   

表单:

form  块级       form-inline  行内    form-ground 分组

input标签:

form-control   input基本样式   input-ground 分组  input-ground-addon将框外文字与输入框结合在一起

在输入框后添加图标:

下拉菜单:    (默认隐藏  点击显示)

         1.按钮和菜单放在一个外层盒子中  类名为dropdown(下拉) 或 dropup(上拉)   其内部属性和类都不变

         2.按钮需要设置一个属性   data-toggle="dropdown"

         3.菜单<ul>标签设置类名 dropdown-menu

栅栏(格)系统:

把屏幕分为12列, 通过行row  列col  组合来分配格子

最外层盒子的类名为   Container   固定宽度   或   container-fluid  100%宽度  

大屏  lg   >1200px       中屏   md  >992px       小屏   sm   >768px      特小屏   xs    <768px  

col 只能作为 row的子标签    eg: <div class="row"><div class="col-md-4"></div></div>   若另起一行,只占设置的比例

如果每一份要使用栅格,就要使用外层类名为row的盒子

替换   col-md-pull-移动的列数      向左边移动

          col-md-push-移动的列数    向右边移动

留空白    空白位置在中间,通过移动    col-md-offset-移动的列数

导航:   ul-li

面包屑导航:  (路径导航)    <ul>的类名为:  breadcrumb      类似于这种效果:  qq / 分组 / 同学

导航nav:

nav  导航样式        nav-tabs  基本导航        nav-pills  胶囊      nav-stacked   竖向      nav-justify   两端对齐

导航条:

navbar  导航条      navbar-default  基本导航条        navbar-inverse  反色导航条