CSS Image引导样式内容

我一直在尝试将图像添加到引导程序中，以便在将窗口大小调整为移动视图时可以减小其大小。CSS Image引导样式内容

到目前为止，这是我的代码::

<html> 
<head> 
<link href="user-profile-css/bootstrap.min.css" rel="stylesheet"> 
<!-- bootstrap theme --> 
<link href="user-profile-css/bootstrap-theme.css" rel="stylesheet"> 
<!--external css--> 
<!-- font icon --> 
<link href="user-profile-css/elegant-icons-style.css" rel="stylesheet" /> 
<link href="user-profile-css/font-awesome.min.css" rel="stylesheet" />  
<!-- full calendar css--> 
<link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /> 
<link href="assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" /> 
<!-- easy pie chart--> 
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/> 
<!-- owl carousel --> 
<link rel="stylesheet" href="user-profile-css/owl.carousel.css" type="text/css"> 
<link href="user-profile-css/jquery-jvectormap-1.2.2.css" rel="stylesheet"> 
<!-- Custom styles --> 
<link rel="stylesheet" href="user-profile-css/fullcalendar.css"> 
<link href="user-profile-css/widgets.css" rel="stylesheet"> 
<link href="user-profile-css/style.css" rel="stylesheet"> 
<link href="user-profile-css/style-responsive.css" rel="stylesheet" /> 
<link href="user-profile-css/xcharts.min.css" rel=" stylesheet">  
<link href="user-profile-css/jquery-ui-1.10.4.min.css" rel="stylesheet"> 
</head> 
<body> 
<section id="main-content"> 
      <section class="wrapper">    
       <div class="row"> 
       <div class="col-lg-12"> 
        <img alt="img-responsive" class="img-responsive" src="images/mainicons/couponbox.png"> 
       </div> 
       </div> 
      </section> 
</section> 
<script src="user-profile-js/jquery.js"></script> 
<script src="user-profile-js/jquery-ui-1.10.4.min.js"></script> 
<script src="user-profile-js/jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="user-profile-js/jquery-ui-1.9.2.custom.min.js"></script> 
<!-- bootstrap --> 
<script src="user-profile-js/bootstrap.min.js"></script> 
<!-- nice scroll --> 
<script src="user-profile-js/jquery.scrollTo.min.js"></script> 
<script src="user-profile-js/jquery.nicescroll.js" type="text/javascript"></script> 
<!-- charts scripts --> 
<script src="assets/jquery-knob/js/jquery.knob.js"></script> 
<script src="user-profile-js/jquery.sparkline.js" type="text/javascript"></script> 
<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script> 
<script src="user-profile-js/owl.carousel.js" ></script> 
<!-- jQuery full calendar --> 
<<script src="user-profile-js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar --> 
<script src="assets/fullcalendar/fullcalendar/fullcalendar.js"></script> 
<!--script for this page only--> 
<script src="user-profile-js/calendar-custom.js"></script> 
<script src="user-profile-js/jquery.rateit.min.js"></script> 
<!-- custom select --> 
<script src="user-profile-js/jquery.customSelect.min.js" ></script> 
<script src="assets/chart-master/Chart.js"></script> 
</body> 
</html>

现在什么样式的标签，使得它移动兼容视图。

来源

2017-02-04 harishk

添加'img-responsive'。 –

Bootstrap有一个辅助工具类img-responsive。

<img class="img-responsive" alt="" src="new folder/couponbox.png">

PS。我相信你做到了，但不管怎样，不要忘记将col-*-*类设置为div.row以下的div。

来源

2017-02-04 06:50:24 Uzbekjon

以及我认为应该添加在标签上的自举链接怎么样？ – harishk

[Here]（http://getbootstrap.com/getting-started/）你走了。这都是有据可查的。 – Uzbekjon

但它仍然不起作用 – harishk

CSS Image引导样式内容

回答

相关问题