bootstrap 栅格系统


lang="zh-CN"     中文字符    

lang="en"            英文字符   使用栅格布局之前先引入栅格布局的自带的样式和jQuery     必须按顺序引入
"stylesheet" href="./css/normalize.css">
"stylesheet" href="./css/bootstrap.min.css">

引入之前移动设备优先引入

"viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这个是浏览器兼容性问题   为了让IE8以下支持HTML5和媒体查询更能

 
    
    
栅格系统:父容器为12份,不管怎么分父容器都是12份 .col-xs-  超小屏幕 手机 (<768px) .col-sm-  小屏幕 平板 (≥768px) .col-md-  中等屏幕 桌面显示器 (≥992px) .col-lg-  大屏幕 大桌面显示器 (≥1200px) 样式是本身有用本身样式,没有找小的,最小的没有,用原有本身的样式(div)
class="container">
class="row">
class="col-md-6">
class="col-md-6">

表格样式:

class="table table-bordered table-striped table-hover">
        class="danger">
                class="bg-danger"> 
                
易烊千玺 易烊千玺 易烊千玺
易烊千玺 易烊千玺 易烊千玺
易烊千玺 易烊千玺 易烊千玺
易烊千玺 易烊千玺 易烊千玺

在表格内加入样式

class="table table-bordered table-striped table-hover">

作用于tr里面的td


class="danger">

作用于tr


class="bg-danger"> 

两者作用不一样但是效果一样

给标签字体加样式

class="text-info">白起7

给标签背景加样式

class="bg-info">白起7

btn:告诉样式是按钮  btn-danger:作用于按钮样式的颜色
"#" class="btn btn-danger">按钮