Bootstrap学习笔记（三）组件_col-sm-offset-CSDN博客

本文链接：https://blog.csdn.net/shilipeng666/article/details/84839200

本文详细介绍了Bootstrap的组件使用，包括全局CSS样式、表单、图标字体、按钮组、下拉菜单、导航、路径导航、分页、标签、徽章等。深入探讨了各种组件的用法、样式调整和响应式设计，对于理解和应用Bootstrap框架非常有帮助。

摘要由CSDN通过智能技术生成

1、复习总结：全局CSS样式：

按钮 .btn .btn-default

图片 .img-rounded .img-circle .img-thumbnail .img-responsive

文本 .text-五种 .bg-五种 .text-left/right/center/justify

排版和代码 .list-unstyled .list-inline

表格 .table .table-bordered .table-responsive .table-striped .table-hover

栅格布局系统

.container .container-fluild

.row

.col-xs-* .col-sm-* .col-md-* .col-lg-*

.hidden-xs .hidden-sm .hidden-md .hidden-lg

2、列的偏移问题(offset)

.col-xs-offset-1~.col-xs-offset-12 在lg/md/sm/xs屏幕下偏移

.col-sm-offset-1~.col-sm-offset-12 在lg/md/sm屏幕下偏移

.col-md-offset-1~.col-md-offset-12 在lg/md屏幕下偏移

.col-lg-offset-1~.col-lg-offset-12 在lg屏幕下偏移

3、全局CSS样式——表单——次重点&难点

Bootstrap中的表单分为三种：

(1)默认表单

<form>

<div class="form-group"> 表单组（增加组之间距离）

<label class="control-label"></label> 控件标签

<input class="form-control"> 表单控件（渐变背景等等）

<span class="help-block"></span> 帮助块（字体颜色变淡字体变小）

</div>

</form>

例：<h2>1.默认表单</h2>
<form action="">
  <div class="form-group">
    <label class="control-label" for="uname">用户名：</label>
    <input class="form-control" id="uname" type="text">
    <span class="help-block">用户名长度在6~12位之间</span>
  </div>

  <div class="form-group">
    <label class="control-label" for="upwd">密码：</label>
    <input class="form-control" id="upwd" type="password">
    <span class="help-block">密码中必须包含数字、字母</span>
  </div>

  
  <div class="checkbox">
    <label>
      <input type="checkbox">我接受本站的使用条款
    </label>
  </div>

  <input class="btn btn-success" type="button" value="提交数据">
  <input class="btn btn-danger" type="button" value="清空重填">
</form>

(2)行内表单

</form>

例：<h2>2.行内表单(inline)</h2>
<form class="form-inline" action="">
  <div class="form-group">
    <label class="control-label" for="uname2">用户名：</label>
    <input class=