Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具)

最新推荐文章于 2024-05-19 13:56:53 发布

原创

最新推荐文章于 2024-05-19 13:56:53 发布 · 712 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #bootstrap #html

本文详细介绍了Bootstrap中的表单样式，包括基本表单、内联表单、表单组合及多选框；按钮样式，如预定义样式、尺寸和状态；响应式图片及图片形状；辅助类，如文本和背景颜色、关闭按钮和浮动；以及响应式工具，如可见性和隐藏性控制。

本节课我们接着上节课内容继续讲全局CSS的样式，今天主要讲表单、按钮、图片、辅助类、以及响应式工具

1.表单
   基本表单
       class="form-control"：可为<input> <textarea> <select>元素设置该属性，会将宽度设置为100%
       class="form-group"：可为<div>设置该属性，<div>中包含<label>和<input>，这样层次会更清晰
   内联表单【让所有的表单元素都显示在一行】
       <form class="form-inline">
   表单组合
       <div class="input-group">
   <span class="input-group-addon"></span>
   <input type="text">
</div>
           例如工资、邮箱等
   水平排列表单,涉及到栅格
       <form class="form-horizontal">
   <label class="col-lg-2 control-label">
   <input class="col-lg-10" type="text"/>
</form>
   多选框
     格式：

<div class="checkbox disabled">
   <label>
       <input type="checkbox"/>
   </label>
</div>
       内联：

           <label class="checkbox-inline">
   <input type="checkbox" disabled/>
</label>
   下拉列表
       <select class="form-control">
   控制尺寸(高度)
       class="form-control input-lg"
       class="form-control input-sm"
   控制尺寸(宽度)
       <div class="row">
   <div class="col-xs-X">
       <input type="text" class="form-contro