Bootstrap学习笔记_col-sm-2 加粗-优快云博客

本文链接：https://blog.youkuaiyun.com/winfredzen/article/details/52949473

本文详细介绍了Bootstrap框架的基础用法，包括排版、表单、网格系统、下拉菜单、按钮组、导航条等组件的设计规范与实例，帮助读者快速掌握前端布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap笔记

排版

标题

规则
这里写图片描述

为了让非标题元素使用相同的样式，还定义了.h1~.h6六个类名。

段落

规则

全局文本字号为14px(font-size)
行高为1.42857143（line-height），大约是20px
字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family）

强调内容

对于<p>元素使用.lead类。

粗体

使用<b>或<strong>标签让文本直接加粗。

斜体

<em>或<i>使用斜体

列表

.list-unstyled去除默认的列表样式风格。
.list-inline实现内联列表。
.dl-horizontal给定义列表实现水平显示效果。

代码

.pre-scrollable控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

表单

input、select、textarea有一个定制的类名form-control，效果为：

宽度变成了100%
设置了一个浅灰色（#ccc）的边框
具有4px的圆角
设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
设置了placeholder的颜色为#999

表单禁用状态
在相应的表单控件上添加属性“disabled”

如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
如果legend中有输入框的话，这个输入框是无法被禁用的。

表单控件状态(验证状态)

1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告状态</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">错误状态</label>
  <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
</div>
</form>

这里写图片描述

显示对号或叉号
要在对应的状态下添加类名“has-feedback”

<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
  <div class="form-group has-error has-feedback">
      <label class="control-label" for="email">Email</label>
      <input type="text" class="form-control" id="email" placeholder="Email Error">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>

</form>

这里写图片描述

表单提示信息

help-block提示信息

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功状态</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  <span class="help-block">你输入的信息是正确的</span>
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
  …
</form>

这里写图片描述

行内提示信息

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div>
</form>

这里写图片描述

基础表单

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱：</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

这里写图片描述

水平表单

实现水平表单效果，要满足以下两个条件：

在<form>元素是使用类名“form-horizontal”
配合Bootstrap框架的网格系统

form-horizontal作用：

设置表单控件padding和margin值
改变“form-group”的表现形式，类似于网格系统的“row”

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> 记住密码
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">进入邮箱</button>
    </div>
  </div>
</form>

这里写图片描述

如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”。换句话说，如果没有这样做，要通过网格系统来控制表单控件宽度，就需要这样使用：

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
    <div class="col-xs-4">
      <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
    </div>
  </div>
  <div class="form-group">
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

  </div>  
  <div class="form-group">
    <div class="col-xs-5">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
    </div>
    <div class="col-xs-7">
      <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
    </div>
  </div> 
</form>

内联表单

form-inline设置内联表单

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

这里写图片描述

input

input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大

<form role="form">
  <div class="form-group">
  <label for="email" class="label-control">邮箱：</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">

  </div>
  <div class="form-group">
      <input type="text" class="form-control" placeholder="Enter username"/>
  </div>
</form>

select

<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>足球</option> 
        <option>游泳</option> 
        <option>慢跑</option> 
        <option>跳舞</option> 
        <option>funny</option> 
      </select>
  </div>

</form>

这里写图片描述

textarea

rows定义其高度，cols设置其宽度。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

checkbox和radio

不管是checkbox还是radio都使用label包起来了
checkbox连同label标签放置在一个名为“.checkbox”的容器内
radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
      喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
      不喜欢
    </label>
  </div>
</form>

这里写图片描述

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

这里写图片描述

网格系统

基本用法

这里写图片描述

列偏移

col-md-offset-*实现列偏移
col-md-offset-4，表示该列向右移动4个列的宽度

列排序

col-md-push-*例如col-md-push-8向右移动8个距离
col-md-pull-*例如col-md-pull-4向左移动4个距离

列嵌套

<div class="container">
    <div class="row">
        <div class="col-md-8">
        我的里面嵌套了一个网格
            <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
          </div>
        </div>
    <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
    我的里面嵌套了一个网格
        <div class="row">
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
          <div class="col-md-4">col-md-4</div>
        </div>
    </div>
    </div>
</div>

这里写图片描述

下拉菜单

基本用法

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    选择你喜欢的水果
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
  </ul>
</div>

这里写图片描述

.divider添加下拉分隔线
.dropdown-header添加下拉菜单的标题
下拉菜单默认是左对齐的，在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类可以右对齐。
在<li>上应用当前状态（.active）和禁用状态（.disabled）

按钮组

将btn-group放在btn-toolbar中可以创建按钮工具栏。
btn-group-vertical创建垂直按钮组。

等分按钮

在按钮组“btn-group”上追加一个“btn-group-justified”类名

在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
    <a class="btn btn-default" href="#">首页</a>
    <a class="btn btn-default" href="#">产品展示</a>
    <a class="btn btn-default" href="#">案例分析</a>
    <a class="btn btn-default" href="#">联系我们</a>
  </div>
</div>

<ul class="nav nav-pills">
  <li class="active"><a href="##">首页</a></li>
  <li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
          <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>
 <li><a href="##">关于我们</a></li>
</ul>

这里写图片描述

面包屑式导航

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">名师简介</a></li>
  <li class="active">大漠</li>
</ol>

这里写图片描述

导航条

导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式

基础导航条

首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

<div class="navbar navbar-default" role="navigation">
     <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
     </ul>
</div>

这里写图片描述

为导航条添加标题、二级菜单及状态

通过“navbar-header”和“navbar-brand”来添加标题

<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
       </li>
       <li><a href="##">名师介绍</a></li>
       <li><a href="##">成功案例</a></li>
       <li><a href="##">关于我们</a></li>
    </ul>
</div>

这里写图片描述

带表单的导航条

navbar-form带表单的导航条
navbar-left”让表单左浮动
navbar-right让表单右浮动

<!--代码-->
<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕课网</a>
  　</div>
    <ul class="nav navbar-nav">
       <li class="active"><a href="##">网站首页</a></li>
       <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
      </li>
      <li><a href="##">名师介绍</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">关于我们</a></li>
     </ul>
     <form action="##" class="navbar-form navbar-right" rol="search">
        <div class="form-group">
           <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
     </form>
</div>

效果为：
这里写图片描述

固定导航条、

.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部

从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

body {
  padding-top: 70px;/*有顶部固定导航条时设置*/
  padding-bottom: 70px;/*有底部固定导航条时设置*/
}

响应式导航条

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">慕课网</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
        </ul>
  </div>
</div>

其它内置组件

警示框

警示框的链接

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
    .
</div>
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong>
     This 
     <a href="#" class="alert-link">alert needs your attention</a>
     , but it's not super important.
</div>