• 计算机基础知识47

    Bootstrap的概念

    # 网址：Bootstrap中文网 (bootcss.com)

    # 概念：

            bootstrap来自Twitter，是目前很受欢迎的前端框架，基于HTML、CSS、JavaScript的，简单灵活，使得Web开发更加快捷。

    # 优点：

            1、标准化的html+css编码规范

            2、提供了一套简洁、直观、强悍的组件

            3、有自己的生态圈，不断的更新迭代

            4、让开发更简单，提高了开发的效率

    # Bootstrap中css样式库使用：引入相关样式文件

    2. "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    css样式之布局容器和栅格系统

    1、布局容器：

    .container响应式布局容器，固定宽度，由设备宽度决定

    .container-fluid 流失布局容器，百分百宽度，占据全部视口的容器

    2、栅格系统(grid systems):

    # 概念它是指将布局容器划分为等宽的列(rem布局是划分屏幕)，然后通过定义一定数量的列来模块化页面布局。 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

    # 栅格选项参数：

      -row必须放在container布局容器里面 , row可以去除父容器作用15px的边

      -当设置的column大于12，多余的column所在的元素将被作为一个整体另起一行排列

      -当设置的column小于12,则占不满整个container 的宽度，会有空白。

      -可以同时为一列指定多个设备的类名，以便在不同设备下占有不同份数

            例如 class=“col-md-4 col-sm-6”

    # 初始写法：

    1. 	<... class="container">
    2.         <... class="row">
    3.             <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...
    4.             <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...
    5.             <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...
    6.             <... class="col-lg-3 col-md-4 col-sm-6 col-xs-12">...
    7.         
    8.

    # 列嵌套，栅格系统再次嵌套一个内置的栅格系统，这个内置的栅格系统作为该列的内容

    1. 	
    2. 	<... class="col-sm-4">
    3. 		<... class="row">
    4. 			<... class="col-sm-6">...
    5. 			<... class="col-sm-6">...
    6. 		
    7.

    # 列偏移 .col-*-offset-* 可以将列向右侧偏移，实际是为当前元素增加了左侧的边距。

    1. <... class="row">
    2. 	<... class="col-lg-4">
    3. 	
    4. 	<... class="col-lg-4 col-lg-offset-4">

    #  列排序 .col-*-push-* 和 .col-*-pull-* ，第一个向后推，第二个向前拉

    1. <... class="row">
    2. 	
    3. 	<... class="col-lg-4  col-lg-push-8">
    4. 	
    5. 	<... class="col-lg-8  col-lg-pull-4">

    3、响应式工具 针对不同设备展示或隐藏页面内容

    css样式之表格

    class="table" 普通表格

    class="table table-dark"  反转颜色表格

    class="table table-striped" 条纹状表格

    class="table table-bordered" 有边框的表格

    class="table table-hover" 有鼠标悬停样式的表格

    class="table table-sm" 紧缩表格的表格

    class="thead-dark"> ... 含表头样式表格

    1. class="table table-hover table-striped table-bordered">
    2. # 普通表格+有鼠标悬停样式的表格+条纹状表格+有边框的表格
    3.     
    4.     
    5.         
    6.         
    7.         
    8.         
    9.         
    10.         
    11.     
    12.     
    13.     
    14.     
    15.         
    16.         
    17.         
    18.         
    19.         
    20.         
    21.     
    22.     
      24. ID图书名称图书价格出版时间作者列表操作
      12345
    24.             "" class="btn btn-success">修改
    25.             "" class="btn btn-danger">删除
    26.

    # 含有状态类的子项的表格

    1. 	
    2. 	<tr class="table-active">...tr>
    3. 	<tr class="table-primary">...tr>
    4. 	<tr class="table-secondary">...tr>
    5. 	<tr class="table-success">...tr>
    6. 	<tr class="table-danger">...tr>
    7. 	<tr class="table-warning">...tr>
    8. 	<tr class="table-info">...tr>
    9. 	<tr class="table-light">...tr>
    10. 	<tr class="table-dark">...tr>
    11. 	
    12. 	
    13. 	<tr>
    14. 	  <td class="table-active">...td>
    15. 	  <td class="table-primary">...td>
    16. 	  <td class="table-secondary">...td>
    17. 	  <td class="table-success">...td>
    18. 	  <td class="table-danger">...td>
    19. 	  <td class="table-warning">...td>
    20. 	  <td class="table-info">...td>
    21. 	  <td class="table-light">...td>
    22. 	  <td class="table-dark">...td>
    23. 	tr>

    css样式之表单

     form-group 将 label 元素和控件包裹在 .form-group 中可以获得最好的排列

    1、栅格布局：.form-row .col-设备-格数  

    1.  
      class="form-row">
    2. 	 
      class="form-group col-设备-格数">
    3. 	 	...
    4.

2、水平布局：.col-form-label，

  1.  	
    class="form-group row">
  2. 	  	
  3. 	    
    class="col-设备-格数">
  4. 	      	<input class="form-control" >
  5.

    • 3、基本表单：

    form-control类的