bootstrap栅栏式布局
<link rel="stylesheet" href="css/bootstrap.css">
container 固定宽度,并居中,响应式布局
container-fluid 占据整个视口宽度
<div class="container-fluid row">
row 行
md是笔记本
lg是pc
如果需要适配pc和手机,我们可以两个一起使用
col-xs-1 默认设置1行分为12列,这里是其中的1列宽度,响应式布局缩放col-xs-1如果我们需要重新调整这个行内显示的最小单位,我们可以使用max-width来调节它的宽度这样可以增加一行内的最多排列数目
col-xs-offset-1 这里表示单位格的偏移,向右偏移,偏移量也是根据格式来确定
-引入bootstrap后,容器内的文本是自动换行的
text-left 居左
text-center 居中
text-right 居右
text-justify 两端对齐
text-nowrap 不换行
text-uppercase 大写
text-lowercase 小写
text-capitalize 首字母大写
<div id="textDiv" class="text-capitalize">文字内容</div>
blockquote 前置方块
close 关闭按钮 ×是一个X符号
caret 三角形
pull-left 左浮动
center-block 水平居中
clearfix 清除浮动
hidden 隐藏
show 显示 ass="blockquote-reverse" 反向缩略语
table-bordered 表格加边框线
table-hover 行的悬停
table-condensed 行高紧缩
list-unstyled 无符号
list-inline 列表横向排列
img-rounded 圆角矩形
img-circle 圆形
img-thumbnail 加边框
form-group 表单群组
form-inline 将内容放置同一行
has-success 设置主题颜色
has-feedback 将图标或者块体植入到表单中
control-label 这个是加给label,如果使用了has-error,这时候label也会使用这个主题
form-control-feedback 将这个符号放置在input里面
form-control 下拉菜单使用form-control这个样式,内容变化
如果后续应用的时候有data-。。。内容,必须要加js首先要加jquery,然后加bootstrap
nav 导航
nav-tabs 导航标签
nav-pills 导航胶囊
pagination 分页样式
<nav class="navbar navbar-default navbar-fixed-top">
<!– <div class="container-fluid row">
<link rel="stylesheet" href="css/bootstrap.css">
container 固定宽度,并居中,响应式布局
container-fluid 占据整个视口宽度
<div class="container-fluid row">
row 行
xs是其中的一种模式,这是手机端
ms是pad端md是笔记本
lg是pc
如果需要适配pc和手机,我们可以两个一起使用
col-xs-1 默认设置1行分为12列,这里是其中的1列宽度,响应式布局缩放col-xs-1如果我们需要重新调整这个行内显示的最小单位,我们可以使用max-width来调节它的宽度这样可以增加一行内的最多排列数目
col-xs-offset-1 这里表示单位格的偏移,向右偏移,偏移量也是根据格式来确定
-引入bootstrap后,容器内的文本是自动换行的
text-left 居左
text-center 居中
text-right 居右
text-justify 两端对齐
text-nowrap 不换行
text-uppercase 大写
text-lowercase 小写
text-capitalize 首字母大写
<div id="textDiv" class="text-capitalize">文字内容</div>
blockquote 前置方块
close 关闭按钮 ×是一个X符号
caret 三角形
pull-left 左浮动
center-block 水平居中
clearfix 清除浮动
hidden 隐藏
show 显示 ass="blockquote-reverse" 反向缩略语
--> table 设置为表格,每行有上边线
table-striped 奇偶行条纹背景table-bordered 表格加边框线
table-hover 行的悬停
table-condensed 行高紧缩
list-unstyled 无符号
list-inline 列表横向排列
img-rounded 圆角矩形
img-circle 圆形
img-thumbnail 加边框
form-group 表单群组
form-inline 将内容放置同一行
has-success 设置主题颜色
has-feedback 将图标或者块体植入到表单中
control-label 这个是加给label,如果使用了has-error,这时候label也会使用这个主题
form-control-feedback 将这个符号放置在input里面
form-control 下拉菜单使用form-control这个样式,内容变化
如果后续应用的时候有data-。。。内容,必须要加js首先要加jquery,然后加bootstrap
nav 导航
nav-tabs 导航标签
nav-pills 导航胶囊
pagination 分页样式
<nav class="navbar navbar-default navbar-fixed-top">
<!– <div class="container-fluid row">