个人中心
gpt4 book ai didi

html - 打印一个 Bootstrap 网站

转载 作者：行者123 更新时间：2023-11-28 08:39:29 25 4
gpt4 key购买 nike

我使用 bootstrap 创建我的简历，将列分为 3 和 9。前 3 列都是技能，9 列是我的工作经验。现在是时候将网页转换为 pdf 格式(雇主希望它是 pdf a4 大小)时，bootstrap 有点组合了列。我有下面的代码

anchor 标记是否也显示了它链接到的页面？我只是想让它看起来和网页一模一样。因此，雇主可以单击 href 链接并转到该网站。

有人推荐使用 col-sm-*。我已经在使用它了，但它看起来不太对劲。

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hi Hello</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }


    h1 { 
     }

     .greybackground{

     }

     .content{
        color:  #505050;
        border-style: solid;
        border-width: 1px;
        font-family: 'Titillium Web', sans-serif;

     }

     .skills{
     }



     .heading2{
        font-size: 18px;
        font-weight: bold;
     }


     .company{
        /*font-style: italic;*/
        text-align:right;
     }

     .heading{
        color:  #909090;
     }

     .job-title{
        font-size: 15px;
        font-weight: bold;
     }


     .techused{
        font-style: italic;
        color:  #909090;

     }

     .contact{
        text-align:right;
     }

    </style>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


</head>

<body>
    <!-- Page Content -->
    <div class="container content">

        <div class="row">
            <div class="col-sm-7">
               <h1> Hello </h1>

            </div>

            <div class="col-sm-5 heading contact" >
                Website :<a href="http://www.google.com" >Lin </a>
                <br>
                GitHub :<a href="https://google.com" >jj</a>
                <br>
                LinkedIn : <a href="https://www.google.com">likka</a>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-sm-3"> 
                <div class="heading heading2">  <i class="fa fa-wrench "></i> SKILL SET </div>
                <hr>
                <div class="skills">
                    PROGRAMMING
                    <ul>
                        <li> Java </li>
                        <li> C++ </li>
                        <li> C </li>
                        <li> RobotC </li>
                    </ul>

                    <br>

                    WEB DEVELOPMENT

                    <ul>
                        <li> JavaScript</li>
                        <li> HTML/CSS </li>
                        <li> PHP </li>
                    </ul>

                    <br>

                    DATABASE

                    <ul>
                        <li> SQL</li>
                    </ul>
                </div>

                <hr>
                <div class="heading heading2">  <i class="fa fa-wrench "></i> EDUCATION </div>
                <hr>
                <div class="skills">
                    Hello
                </div>
            </div>
            <div class="col-sm-9">
                <div class="heading heading2"> <i class="fa fa-briefcase"></i>  WORK EXPERIENCE </div>
                <hr>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Software and Web Developer</div> 
                    <div class="company col-sm-4"><img src="" style="height:16px;width:8px;"> kkk</div>

                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </li>

                        </ul>

                        <div class="techused">Technologies used : Java , JavaFX , SQL , JDBC , Selenium , JavaScript , jQuery , PHP </div>
                    </div>
                </div>
                <br>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Infrastruture Security Analyst</div> 
                    <div class="company col-sm-4"><img src="http://upload.wikimedia.org/wikipedia/en/5/53/Maple_Leaf_Foods.svg" style="height:20px;width:20px;"> Maple Leaf Foods</div>

                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  </li>
                        </ul>

                         <div class="techused"> Technologies used : Microsoft's SCCM, Cisco's IronPort , FireEye and ePo.</div>
                    </div>
                </div>
                <hr>
                <div class="heading heading2"> <i class="fa fa-code"></i> PROJECTS</div>
                <hr>
                <div class="row ">

                    <div class="position col-sm-8 job-title" >Hello</div> 
                    <div class="company col-sm-4"><img src="http://hackthenorth.com/img/logo.png" style="height:15px;width:15px;"> Hack the North</div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Won top pebble award at Canada's largest Hackathon by developing a Nocturnal epilepsy tracker and prevention pebble application.
                            </li>
                            <li>
                                Worked as a pair programmer on the Pebble and Android Platforms to capture, store and send information to a server database for further data analytics
                            </li>
                        </ul>

                        <div class="featured">Featured On : <a href="https://news.ycombinator.com/item?id=8372583">Hacker News</a>, <a href="http://challengepost.com/software/pebilepsy"> Challenge Post</a> , <a href="http://www.medgadget.com/2014/09/pebilepsy-uses-fitness-tracker-to-monitor-night-time-seizures.html" > Med Gadgets </a></div>
                        <div class="techused">Technologies used : Android Development, Pebble API </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Game Robot</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Built a joystick-controlled robot which could retrive objects.
                            </li>
                        </ul>

                        <div class="techused"> Technologies used : RobotC , NXT Mindstorm Robot</div>
                    </div>
                </div>


                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Temperature Map</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                               Allows the user to browse map and retrive the current time and temperature of the location the user picks. 
                            </li>
                        </ul>

                        <div class="techused"> Technologies used : Google Map API , Temperature API , jQuery , AJAX</div>
                    </div>
                </div>

                <br>
                <div class="row">
                    <div class="position col-sm-8 job-title" >Exam Schedular</div> 
                    <div class="company col-sm-4"></div>
                    <div class="col-sm-12 greybackground">
                        <ul>
                            <li>
                                Allows a UW Student to view their exam schedule and add it to google calendar.
                            </li>
                        </ul>
                        <div class="techused"> Technologies used :  jQuery , AJAX</div>
                    </div>
                </div>
             </div>

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

最佳答案

你需要改变这一行:

<link href="css/bootstrap.min.css" rel="stylesheet">

到

<link href="css/bootstrap.min.css" rel="stylesheet" media="print">

这样您的打印机就可以读取 Bootstrap 样式。您的内部样式也是如此(尝试使用外部样式表!)。

如果你想让这些样式被打印和网络使用，那么使用

<link href="css/bootstrap.min.css" rel="stylesheet" media="all">

您可以阅读 more about media types here

关于html - 打印一个 Bootstrap 网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27880497/

25 4 0
文章推荐： css - 带透明背景的按钮渐变边框
文章推荐： html - 导航栏中的链接不会将我带到下一页，而是消失了
文章推荐： javascript - Facebook Canvas : Uncaught TypeError: Cannot call method 'sort' of undefined
文章推荐： html - 为什么要使用列表进行导航？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com