• bootstrap学习:栅格实例-不同用户端不同界面

     

     

     

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		
    6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    8. 		<title>title>
    9. 		<link rel="stylesheet" type="text/css" href="../bootstrap-3.4.1/dist/css/bootstrap.min.css">
    10. 		<script src="../../jQuery/js/jquery-3.6.1.js">script>
    11. 		<script src="../bootstrap-3.4.1/dist/js/bootstrap.js">script>
    12. 		<style>
    13. 			.thumbnail>img {
    14. 				width: 250px;
    15. 				height: 150px;
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		<div class="container">
    21. 			
    22. 			<div class="jumbotron">
    23. 				<h1>Hello, world!h1>
    24. 				<p>...p>
    25. 				<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn morea>p>
    26. 			div>
    27. 			<div class="row">
    28. 				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    29. 					
    30. 					<div class="thumbnail">
    31. 						<img src="../../img/a0.png" alt="...">
    32. 						<div class="caption">
    33. 							<h3>a0图片h3>
    34. 							<p class="text-center">Center aligned text.p>
    35. 							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.p>
    36. 							<p><a href="#" class="btn btn-primary" role="button">Buttona> <a href="#"
    37. 									class="btn btn-default" role="button">Buttona>p>
    38. 						div>
    39. 					div>
    40. 				div>
    41. 				<div class="col-lg-3  col-md-4 col-sm-6  col-xs-12">
    42. 					
    43. 					<div class="thumbnail">
    44. 						<img src="../../img/a1.png" alt="...">
    45. 						<div class="caption">
    46. 							<h3>a1图片h3>
    47. 							<p class="text-center">Center aligned text.p>
    48. 							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.p>
    49. 							<p><a href="#" class="btn btn-primary" role="button">Buttona> <a href="#"
    50. 									class="btn btn-default" role="button">Buttona>p>
    51. 						div>
    52. 					div>
    53. 				div>
    54. 				<div class="col-lg-3  col-md-4 col-sm-6  col-xs-12">
    55. 					
    56. 					<div class="thumbnail">
    57. 						<img src="../../img/a2.png" alt="...">
    58. 						<div class="caption">
    59. 							<h3>a2图片h3>
    60. 							<p class="text-center">Center aligned text.p>
    61. 							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.p>
    62. 							<p><a href="#" class="btn btn-primary" role="button">Buttona> <a href="#"
    63. 									class="btn btn-default" role="button">Buttona>p>
    64. 						div>
    65. 					div>
    66. 				div>
    67. 				<div class="col-lg-3  col-md-4 col-sm-6  col-xs-12">
    68. 					
    69. 					<div class="thumbnail">
    70. 						<img src="../../img/a3.png" alt="...">
    71. 						<div class="caption">
    72. 							<h3>a3图片h3>
    73. 							<p class="text-center">Center aligned text.p>
    74. 							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.p>
    75. 							<p><a href="#" class="btn btn-primary" role="button">Buttona> <a href="#"
    76. 									class="btn btn-default" role="button">Buttona>p>
    77. 						div>
    78. 					div>
    79. 				div>
    80.  
    81. 			div>
    82. 		div>
    83. 	body>
    84. html>

     

  • 相关阅读:
    【Docker】用Dockerfile制作个人的镜像文件
    [附源码]计算机毕业设计JAVASSM归途中流浪动物收容与领养管理系统
    擎创技术流 | Prometheus与Zabbix的融合实践
    windows编译zlmediakit
    python-opencv 培训课程笔记（2）
    Java 设计模式——外观模式
    EtherCAT轴扩展模块EIO16084在运动控制系统中的应用
    如何安装 StoneDB 2.0 企业版? | StoneDB 使用教程 #2
    power point导出pdf保留字体
    jdk线程池ThreadPoolExecutor工作原理解析（自己动手实现线程池）
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/127949906