• Web开发之常用框架BootStrap

    bootstrap是基于HTML、CSS、JS的前端框架，该框架预定了一套CSS样式和与样式相对应的JS代码，开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以实现指定的效果展示。BootStrap使得web开发更加高效，并且支持响应式开发，解决了移动互联网前端开发问题。所谓的响应式开发：即一个网站的展示能够兼容多个终端，不需要为每个终端单独做一个展示版本，节约了开发成本，提高了用户体验。

    目录

    1、BootStrap的基本模板

    2、Bootstrap之布局容器

    3、BootStrap之栅格系统

    4、BootStrap之列表

    5、Bootstrap之按钮

    6、BootStrap之导航条

    7、BootStrap之轮播图

    8、BootStrap的排版对齐方式

    9、BootStrap之表单元素

    10、BootStrap之分页条

    11、Bootstrap案例实现

    1、BootStrap的基本模板

    可以去官网复制模板代码，然后稍作修改即可，主要修改引入的两个JS文件和一个CSS文件的地址，官网地址如下：bootstrap模板官网地址，修改后的代码如下：
     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body>
    20. <h1>你好，世界！h1>
    21.  
    22.  
    23. body>
    24. html>

    2、Bootstrap之布局容器

    bootstrap必须使用至少一个布局容器，才能为页面内容进行封装和方便样式的控制，相当于一个模板，Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器，.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body>
    20. <h1>两种布局容器h1>
    22. <div class="container" style="border: 1px solid red"> 11111111111 div>
    24. <div class = "container-fluid" style="border: 1px solid blue">22222222222div>
    25.  
    26. body>
    27. html>

    3、BootStrap之栅格系统

    为了方便在布局容器中进行布局操作，Bootstrap提供了一套专门应用于响应式开发布局的栅格系统，栅格系统将一行分为12列，通过元素的列数布局元素在页面的展示位置。关于栅格系统的具体介绍可以参考此网站：BootStrap官网栅格系统

    栅格系统的基本书写形式：容器->行->列，栅格参数:col-屏幕尺寸-占用列数，具体如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body>
    20. <h1>栅格系统h1>
    22. <div class="container" >
    23.     
    24. <div class="row">
    25.     
    26.     <div class="col-lg-4" style="border: 1px solid red">
    27.         第1列
    28.     div>
    29.     <div class="col-lg-4" style="border: 1px solid blue">
    30.         第2列
    31.     div>
    32.     <div class="col-lg-4" style="border: 1px solid green">
    33.         第3列
    34.     div>
    35.  
    36. div>
    37. div>
    38.  
    39.  
    40. body>
    41. html>

    注意：一个row下，如果列的个数小于等于12，则row下元素在一行排列；一个row下，如果设置的列数大于12，那么超出的元素将会另起一行排列，行和列可以无限嵌套，嵌套方式必须是列-行-列-行。

    栅格系统的屏幕尺寸参数如下，主要分为四种，对列参数的设置，通过设置不同屏幕尺寸下的样式实现可以实现一套样式使用所有终端。

     注意事项：若设置了某个屏幕尺寸的样式，那么比该屏幕尺寸大的屏幕，就会沿用该设置，比该屏幕尺寸小的设置，将会默认一个元素占满12列。

    下面看一下栅格系统的列偏移，使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body>
    20. <h1>栅格系统h1>
    22. <div class="container" >
    23.     
    24. <div class="row">
    25.     
    26.     <div class="col-lg-4 col-lg-offset-3" style="border: 1px solid red">
    27.         列偏移3个单元格
    28.     div>
    29.     <div class="col-lg-4 col-lg-offset-4" style="border: 1px solid red">
    30.         列偏移4个单元格
    31.     div>
    32.     <div class="col-lg-4 col-lg-offset-5" style="border: 1px solid red">
    33.         列偏移5个单元格
    34.     div>
    35. div>
    36. div>
    37.  
    38. body>
    39. html>

    4、BootStrap之列表

    bootstrap基础代码实践
    rar 0星 超过10%的资源 426KB
    下载

    通过设置class="list-inline"可以实现将无需列表放到一行，具体如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body >
    20. <h1>列表h1>
    21. <ul class="list-inline">
    22.     <li>第1行li>
    23.     <li>第2行li>
    24.     <li>第3行li>
    25.     <li>第4行li>
    26. ul>
    27. div>
    28. div>
    29.  
    30. body>
    31. html>

    5、Bootstrap之按钮

    可以设置按钮的类型和按钮的尺寸，具体如下：
     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body >
    20. <h1>按钮h1>
    23. <button type="button" class="btn btn-default">（默认样式）Defaultbutton>
    25. <button type="button" class="btn btn-primary">（首选项）Primarybutton>
    27. <button type="button" class="btn btn-success">（成功）Successbutton>
    29. <button type="button" class="btn btn-info">（一般信息）Infobutton>
    31. <button type="button" class="btn btn-warning">（警告）Warningbutton>
    33. <button type="button" class="btn btn-danger">（危险）Dangerbutton>
    34. <button type="button" class="btn btn-link">（链接）Linkbutton>
    35.  
    37. <<p>
    38.     <button type="button" class="btn btn-primary btn-lg">（大按钮）Large buttonbutton>
    39.     <button type="button" class="btn btn-default btn-lg">（大按钮）Large buttonbutton>
    40. p>
    41. <p>
    42.     <button type="button" class="btn btn-primary">（默认尺寸）Default buttonbutton>
    43.     <button type="button" class="btn btn-default">（默认尺寸）Default buttonbutton>
    44. p>
    45. <p>
    46.     <button type="button" class="btn btn-primary btn-sm">（小按钮）Small buttonbutton>
    47.     <button type="button" class="btn btn-default btn-sm">（小按钮）Small buttonbutton>
    48. p>
    49. <p>
    50.     <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small buttonbutton>
    51.     <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small buttonbutton>
    52. p>
    53.  
    54. div>
    55. div>
    56.  
    57. body>
    58. html>

    6、BootStrap之导航条

    Bootstrap提供了导航条的模板，具体的模板代码官网地址如下：导航条模板，我们需要对此模板进行适当修改，我根据我的需求做了修改，修改后的代码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17.  
    18. head>
    19. <body >
    21. <nav class="navbar navbar-inverse">
    22.     <div class="container-fluid">
    23.         
    24.         <div class="navbar-header">
    25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    26.                 
    27.                 <span class="sr-only">Toggle navigationspan>
    28.                 <span class="icon-bar">span>
    29.                 <span class="icon-bar">span>
    30.                 <span class="icon-bar">span>
    31.             button>
    32.             <a class="navbar-brand" href="#">首页a>
    33.         div>
    34.  
    35.         
    36.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    37.                 <ul class="nav navbar-nav">
    38.                     <li class="active"><a href="#">手机数码 <span class="sr-only">(current)span>a>li>
    39.                     <li><a href="#">电脑办公a>li>
    40.                     <li class="dropdown">
    41.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 更多 <span class="caret">span>a>
    42.                         <ul class="dropdown-menu">
    43.                             <li><a href="#">Actiona>li>
    44.                             <li><a href="#">Another actiona>li>
    45.                             <li><a href="#">Something else herea>li>
    46.                             <li role="separator" class="divider">li>
    47.                             <li><a href="#">Separated linka>li>
    48.                             <li role="separator" class="divider">li>
    49.                             <li><a href="#">One more separated linka>li>
    50.                         ul>
    51.                     li>
    52.             ul>
    53.  
    54.             <form class="navbar-form navbar-right">
    55.                 <div class="form-group">
    56.                     <input type="text" class="form-control" placeholder="查找">
    57.                 div>
    58.                 <button type="submit" class="btn btn-default">提交button>
    59.             form>
    60.         div>
    61.     div>
    62. nav>
    63.  
    64. body>
    65. html>

    7、BootStrap之轮播图

    BootStrap已经提供了完整的轮播图实例，我们只需要简单修改就可以使用，至于轮播图实例的模板代码如下：轮播图实例，我根据官方提供的代码，结合自己的需求做了修改，修改后的代码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    21. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"data-interval="1000">
    22.     
    23.     <ol class="carousel-indicators">
    24.         <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
    25.         <li data-target="#carousel-example-generic" data-slide-to="1">li>
    26.         <li data-target="#carousel-example-generic" data-slide-to="2">li>
    27.     ol>
    28.  
    29.     
    30.     <div class="carousel-inner" role="listbox">
    31.         <div class="item active">
    32.             <img src="../img/1.jpg" />
    33.             <div class="carousel-caption">
    34.                 图片1的说明信息
    35.             div>
    36.         div>
    37.         <div class="item">
    38.             <img src="../img/2.jpg"/>
    39.             <div class="carousel-caption">
    40.                 图片2的说明信息
    41.             div>
    42.         div>
    43.         <div class="item">
    44.             <img src="../img/3.jpg"/>
    45.             <div class="carousel-caption">
    46.                 图片3的说明信息
    47.             div>
    48.         div>
    49.     div>
    50.  
    51.     
    52.     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    53.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    54.         <span class="sr-only">Previousspan>
    55.     a>
    56.     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    57.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    58.         <span class="sr-only">Nextspan>
    59.     a>
    60. div>
    61. body>
    62. html>

    多个轮播图，需要需要轮播图的id，下面同时实现两个轮播图，具体如下：
     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    21. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"data-interval="1000">
    22.     
    23.     <ol class="carousel-indicators">
    24.         <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
    25.         <li data-target="#carousel-example-generic" data-slide-to="1">li>
    26.         <li data-target="#carousel-example-generic" data-slide-to="2">li>
    27.     ol>
    28.  
    29.     
    30.     <div class="carousel-inner" role="listbox">
    31.         <div class="item active">
    32.             <img src="../img/1.jpg" />
    33.             <div class="carousel-caption">
    34.                 图片1的说明信息
    35.             div>
    36.         div>
    37.         <div class="item">
    38.             <img src="../img/2.jpg"/>
    39.             <div class="carousel-caption">
    40.                 图片2的说明信息
    41.             div>
    42.         div>
    43.         <div class="item">
    44.             <img src="../img/3.jpg"/>
    45.             <div class="carousel-caption">
    46.                 图片3的说明信息
    47.             div>
    48.         div>
    49.     div>
    50.  
    51.     
    52.     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    53.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    54.         <span class="sr-only">Previousspan>
    55.     a>
    56.     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    57.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    58.         <span class="sr-only">Nextspan>
    59.     a>
    60. div>
    61.  
    62.  
    63.     
    64.     
    65.     <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel"data-interval="1000">
    66.         
    67.         <ol class="carousel-indicators">
    68.             <li data-target="#carousel-example-generic1" data-slide-to="0" class="active">li>
    69.             <li data-target="#carousel-example-generic1" data-slide-to="1">li>
    70.             <li data-target="#carousel-example-generic1" data-slide-to="2">li>
    71.         ol>
    72.  
    73.         
    74.         <div class="carousel-inner" role="listbox">
    75.             <div class="item active">
    76.                 <img src="../img/1.jpg" />
    77.                 <div class="carousel-caption">
    78.                     图片1的说明信息
    79.                 div>
    80.             div>
    81.             <div class="item">
    82.                 <img src="../img/2.jpg"/>
    83.                 <div class="carousel-caption">
    84.                     图片2的说明信息
    85.                 div>
    86.             div>
    87.             <div class="item">
    88.                 <img src="../img/3.jpg"/>
    89.                 <div class="carousel-caption">
    90.                     图片3的说明信息
    91.                 div>
    92.             div>
    93.         div>
    94.  
    95.         
    96.         <a class="left carousel-crontrol" href="#carousel-example-generic1" role="button" data-slide="prev">
    97.             <span class="glyphicon glyphicon-chevron-left" aia-hidden="true">span>
    98.             <span class="sr-only">Previousspan>
    99.         a>
    100.         <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
    101.             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    102.             <span class="sr-only">Nextspan>
    103.         a>
    104. div>
    105. body>
    106. html>

    8、BootStrap的排版对齐方式

    三种对齐方式：左右中。

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    19.  
    20. <div class="text-center">
    21.     居中对齐
    22. div>
    23. <div class="text-left">
    24.     居左对齐
    25. div>
    26. <div class="text-right">
    27.     居右对齐
    28. div>
    29.  
    30. body>
    31. html>
    bootstrap的常用组件和栅格式布局详解
    pdf 0星 超过10%的资源 45KB
    下载

    9、BootStrap之表单元素

    BootStrap官网提供了多种表单样式，可以根据自己的需求复制代码模板后修改即可，表单模板的网址如下：BootStrap表单模板.

    下面介绍第一种是水平排列的表单，修改后的代码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    20. <form class="form-horizontal">
    21.     <div class="form-group">
    22.         <label  class="col-sm-2 control-label">用户名label>
    23.         <div class="col-sm-6">
    24.             <input type="text" class="form-control" placeholder="请输入用户名">
    25.         div>
    26.     div>
    27.     <div class="form-group">
    28.         <label  class="col-sm-2 control-label">密码label>
    29.         <div class="col-sm-6">
    30.             <input type="password" class="form-control" placeholder="请输入密码">
    31.         div>
    32.     div>
    33.     <div class="form-group">
    34.         <div class="col-sm-offset-2 col-sm-6">
    35.             <div class="checkbox">
    36.                 <label>
    37.                     <input type="checkbox"> 记住用户名
    38.                 label>
    39.             div>
    40.         div>
    41.     div>
    42.     <div class="form-group">
    43.         <div class="col-sm-offset-2 col-lg-6">
    44.             <button type="submit" class="btn btn-default">提交button>
    45.         div>
    46.     div>
    47. form>
    48.  
    49. body>
    50. html>

    下面介绍第二种是在原来的基础之上加入输入正确和输入错误的颜色提示，输入正确显示绿色，输入错误显示红色，具体如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    20. <form class="form-horizontal">
    21.     <div class="form-group has-error">
    22.         <label  class="col-sm-2 control-label" >用户名label>
    23.         <div class="col-sm-6">
    24.             <input type="text" class="form-control" placeholder="请输入用户名">
    25.         div>
    26.     div>
    27.     <div class="form-group has-success">
    28.         <label  class="col-sm-2 control-label">密码label>
    29.         <div class="col-sm-6">
    30.             <input type="password" class="form-control" placeholder="请输入密码">
    31.         div>
    32.     div>
    33.     <div class="form-group">
    34.         <div class="col-sm-offset-2 col-sm-6">
    35.             <div class="checkbox">
    36.                 <label>
    37.                     <input type="checkbox"> 记住用户名
    38.                 label>
    39.             div>
    40.         div>
    41.     div>
    42.     <div class="form-group">
    43.         <div class="col-sm-offset-2 col-lg-6">
    44.             <button type="submit" class="btn btn-default">提交button>
    45.         div>
    46.     div>
    47. form>
    48.  
    49. body>
    50. html>

    10、BootStrap之分页条

    下面介绍Bootstrap中分页条的使用，分页条的官方模板如下所示：BootStrap分页条模板

    我根据自己的需求对分页条模板进行了修改，修改后的代码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.  
    17. head>
    18. <body>
    20. <nav aria-label="Page navigation">
    21.     
    22.     <ul class="pagination">
    23.         
    24.         <li>
    25.             <a href="#" aria-label="Previous">
    26.                 <span aria-hidden="true">«span>
    27.             a>
    28.         li>
    29.         
    30.         <li class="active"><a href="#">1a>li>
    31.         <li><a href="#">2a>li>
    32.         <li><a href="#">3a>li>
    33.         <li><a href="#">4a>li>
    34.         <li><a href="#">5a>li>
    35.         <li>
    36.             
    37.             <a href="#" aria-label="Next">
    38.                 <span aria-hidden="true">»span>
    39.             a>
    40.         li>
    41.     ul>
    42. nav>
    43.  
    44. body>
    45. html>

    11、Bootstrap案例实现

    做一个响应式的注册页面，使用栅格系统，划分6行，页面如下：

    具体的源代码如下：

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="../css/bootstrap.min.css" >
    12.     
    13.     <script src="../js/jquery-1.11.3.min.js" >script>
    14.     
    15.     <script src="../js/bootstrap.min.js" >script>
    16.     <script>
    17.  
    18.         //非空检验函数
    19.         function checkNotNull(uid) {
    20.             var nodex = document.getElementById(uid) ;
    21.             var msg = document.getElementById(uid+"Msg") ;
    22.             var div = document.getElementById(uid+"Div") ;
    23.             var reg = /^\s*$/ ;
    24.             if(reg.test(nodex.value)){
    25.                 div.className += " has-error" ;
    26.                 msg.innerHTML = "不能为空" ;
    27.                 return false ;
    28.             }else{
    29.                 return true ;
    30.             }
    31.         }
    32.         //用户名的校验
    33.         function checkForm() {
    34.             var flag = checkNotNull("username") ;
    35.             var flag1 = checkNotNull("password") ;
    36.             var flag2 = checkNotNull("confirm") ;
    37.             return flag && flag1 && flag2 ;
    38.         }
    39.  
    40.     script>
    41.  
    42. head>
    43. <body>
    45. <div class="container">
    46.     
    47.     <div class="row" >
    48.         <div class="col-md-4" style="margin-top: 20px">
    49.             <img src="../img/logo4.jpg">
    50.         div>
    51.         <div class="col-md-4">
    52.             <img src="../img/header.png">
    53.         div>
    54.         <div class="col-md-4">
    55.             <ul class="list-inline" style="margin-top: 10px">
    56.                 <li><a href="" class="btn btn-primary">登录a> li>
    57.                 <li><a href="" class="btn btn-primary">注册a> li>
    58.                 <li><a href="" class="btn btn-danger">购物车a> li>
    59.             ul>
    60.         div>
    61.     div>
    62.  
    63.     
    64.     <nav class="navbar navbar-inverse">
    65.         <div class="container-fluid">
    66.             
    67.             <div class="navbar-header">
    68.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    69.                     
    70.                     <span class="sr-only">Toggle navigationspan>
    71.                     <span class="icon-bar">span>
    72.                     <span class="icon-bar">span>
    73.                     <span class="icon-bar">span>
    74.                 button>
    75.                 <a class="navbar-brand" href="#">首页a>
    76.             div>
    77.  
    78.             
    79.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    80.                 <ul class="nav navbar-nav">
    81.                     <li class="active"><a href="#">手机数码 <span class="sr-only">(current)span>a>li>
    82.                     <li><a href="#">电脑办公a>li>
    83.                     <li class="dropdown">
    84.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 更多 <span class="caret">span>a>
    85.                         <ul class="dropdown-menu">
    86.                             <li><a href="#">Actiona>li>
    87.                             <li><a href="#">Another actiona>li>
    88.                             <li><a href="#">Something else herea>li>
    89.                             <li role="separator" class="divider">li>
    90.                             <li><a href="#">Separated linka>li>
    91.                             <li role="separator" class="divider">li>
    92.                             <li><a href="#">One more separated linka>li>
    93.                         ul>
    94.                     li>
    95.                 ul>
    96.  
    97.                 <form class="navbar-form navbar-right">
    98.                     <div class="form-group">
    99.                         <input type="text" class="form-control" placeholder="查找">
    100.                     div>
    101.                     <button type="submit" class="btn btn-default">提交button>
    102.                 form>
    103.             div>
    104.         div>
    105.     nav>
    106.  
    108.     <div class="row" style="background-image: url(../img/regist_bg.jpg)">
    109.         <div class="col-sm-8 col-sm-offset-2" style="border: 5px solid gainsboro;background-color: white">
    110.             
    111.             <div class="row">
    112.                 <div class="col-sm-8 col-sm-offset-2">
    113.                     <font color="aqua">会员注册font>
    114.                 div>
    115.             div>
    116.             
    117.             <form class="form-horizontal" onsubmit="return checkForm()" >
    118.                 <div id="usernameDiv" class="form-group " >
    119.                     <label  class="col-sm-2 control-label">用户名label>
    120.                     <div class="col-sm-8">
    121.                         <input type="text" class="form-control" id = "username" name="username1" placeholder="请输入用户名">
    122.                     div>
    123.                     <label id = "usernameMsg" class="col-sm-2 control-label">label>
    124.                 div>
    125.                 <div id="passwordDiv" class="form-group">
    126.                     <label  class="col-sm-2 control-label">密码label>
    127.                     <div class="col-sm-8">
    128.                         <input type="password" class="form-control" id = "password" name="password1" placeholder="请输入密码">
    129.                     div>
    130.                     <label id = "passwordMsg" class="col-sm-2 control-label">label>
    131.                 div>
    132.                 <div id="confirmDiv" class="form-group">
    133.                     <label  class="col-sm-2 control-label">确认密码label>
    134.                     <div class="col-sm-8">
    135.                         <input type="password"  class="form-control" id = "confirm" name="confirm1" placeholder="请输入确认密码">
    136.                     div>
    137.                     <label id = "confirmMsg" class="col-sm-2 control-label">label>
    138.                 div>
    139.                 <div class="form-group">
    140.                     <label  class="col-sm-2 control-label">邮箱label>
    141.                     <div class="col-sm-8">
    142.                         <input type="text" class="form-control" id = "email" name="email" placeholder="请输入邮箱号">
    143.                     div>
    144.                 div>
    145.                 <div class="form-group">
    146.                     <label  class="col-sm-2 control-label">姓名label>
    147.                     <div class="col-sm-8">
    148.                         <input type="text" class="form-control" id = "name" name="name" placeholder="请输入姓名">
    149.                     div>
    150.                 div>
    151.                 <div class="form-group">
    152.                     <label  class="col-sm-2 control-label">性别label>
    153.                     <div class="col-sm-8">
    154.                         <input type="radio"  name="sex" value="man"/>男
    155.                         <input type="radio" name="sex" value="woman"/>女
    156.                     div>
    157.                 div>
    158.                 <div class="form-group">
    159.                     <div class="col-sm-offset-2 col-lg-8">
    160.                         <button type="submit" class="btn btn-primary btn-lg">注 册button>
    161.                     div>
    162.                 div>
    163.             form>
    164.         div>
    165.     div>
    166.  
    167.     
    168.     <div class="row">
    169.         <div class="col-xs-12 text-center">
    170.             <img src="../img/footer.jpg" width="100%">
    171.         div>
    172.     <div class="row">
    173.         <div class="col-xs-12 text-center">
    174.             <ul class="list-inline">
    175.                 <li><a href="">联系我们a> li>
    176.                 <li><a href="">关于我们a> li>
    177.                 <li><a href="">加入我们a> li>
    178.                 <li><a href="">客服在线a> li>
    179.                 <li><a href="">在线支付a> li>
    180.                 <li><a href="">法律服务a> li>
    181.                 <li><a href="">特殊声明a> li>
    182.                 <li><a href="">官方声明a> li>
    183.             ul>
    184.         div>
    185.     div>
    186.         <div class="row">
    187.             <div class="col-xs-12 text-center">
    188.                 Copyright @author wgd
    189.             div>
    190.         div>
    191.  
    192. div>
    193. div>
    194. body>
    195. html>
  • 相关阅读:
    [buuctf][WUSTCTF2020]level1
    最全前端面试总结来袭！抓紧收藏了！
    目标检测的迁移学习
    AWS香港Web3方案日，防御云安全实践案例受关注
    Java访问Scala中的Int类型
    Vidmore Screen Recorder 1.1.62 学习
    MySQL系列-高级-深入理解Mysql事务隔离级别与锁机制01
    js实现一行半文本的截取
    ChatGPT新增超强插件：文本直接生成视频、海报，支持自定义修改！
    论文阅读 基于机器学习文本处理的PHP和JSP Web shell检测系统（上海交大）
  • 原文地址：https://blog.csdn.net/nuist_NJUPT/article/details/126378920