Fatal编程技术网
  • javascript/
  • Javascript 使用bootstrap'设计配置文件盒；s网格系统

Javascript 使用bootstrap'设计配置文件盒；s网格系统

javascript jquery html css twitter-bootstrap

Javascript 使用bootstrap'设计配置文件盒；s网格系统,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,嗨，我正试图修改它，使它看起来像我下面的图片，其中B，C，D，E都是相同的大小有一点大。我正试图在我的网站上的个人资料部分使用它（它解释了图像的内部框） 不过，我的电网系统有很多问题。当我插入图像时，文本可能会出现错位，或者框不会并排出现 以下是我的JSFIDLE： 有人能帮我吗！？或者可能指导我使用另一个比手工操作更简单的框架 <!DOCTYPE html> <html lang="en"> <head> <meta chars

嗨，我正试图修改它，使它看起来像我下面的图片，其中B，C，D，E都是相同的大小有一点大。我正试图在我的网站上的个人资料部分使用它（它解释了图像的内部框）

不过，我的电网系统有很多问题。当我插入图像时，文本可能会出现错位，或者框不会并排出现

以下是我的JSFIDLE：

有人能帮我吗！？或者可能指导我使用另一个比手工操作更简单的框架

    <!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>Stylish Portfolio - Start Bootstrap Theme</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">


    <!-- Custom CSS -->
    <link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>

    body{padding-top:30px;}

.glyphicon {  margin-bottom: 10px;margin-right: 10px;}

small {
display: block;
line-height: 1.428571429;
color: #999;
}
    </style>


</head>

<body>
            <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-8">
                    <div class="well well-sm">
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <img src="" alt="" class="img-rounded img-responsive" />
                            </div>
                            <div class="col-sm-6 col-md-8">
                                <h4>
                                    Person</h4>
                                <small><cite title="San Francisco, USA">USA <i class="glyphicon glyphicon-map-marker">
                                </i></cite></small>
                                <p>
                                    <i class="glyphicon glyphicon-envelope"></i>email@example.com
                                    <br />
                                    <i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
                                    <br />
                                    <i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
                                <!-- Split button -->
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">
                                        Social</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span><span class="sr-only">Social</span>
                                    </button>

                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Twitter</a></li>
                                        <li><a href="https://plus.google.com/+Jquery2dotnet/posts">Google +</a></li>
                                        <li><a href="https://www.facebook.com/jquery2dotnet">Facebook</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Github</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="well well-sm">
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Bhaumik Patel</h4>
                        <small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>email@example.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary">
                                Social</button>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span><span class="sr-only">Social</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Twitter</a></li>
                                <li><a href="https://plus.google.com/+Jquery2dotnet/posts">Google +</a></li>
                                <li><a href="https://www.facebook.com/jquery2dotnet">Facebook</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Github</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


    <!-- jQuery -->
    <!-- Bootstrap Core JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script>
    // Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Scrolls to the selected menu item on the page
    $(function() {
        $('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>

</body>

</html>


时尚组合-启动引导主题
正文{padding top:30px；}
.glyphicon{页边距底部：10px；页边距右侧：10px；}
小的{
显示：块；
线高：1.428571429；
颜色：#999；
}
人
美国

email@example.com




1988年6月2日

社会的
社会的

    

  • 

  • 

  • 

  • 

  • 


巴米克·帕特尔
美国旧金山

email@example.com




1988年6月2日

社会的
社会的

    

  • 

  • 

  • 

  • 

  • 


//关闭侧边栏菜单
$（“#菜单关闭”）。单击（功能（e）{
e、 预防默认值（）；
$（“#边栏包装”）.toggleClass（“活动”）；
});
//打开侧边栏菜单
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#边栏包装”）.toggleClass（“活动”）；
});
//滚动到页面上选定的菜单项
$（函数（）{
$（'a[href*=#]：not（[href=#]）：not（[href=#myCarousel]）。单击（函数（）{
if（location.pathname.replace（/^\/，“”）=this.pathname.replace（/^\/，“”）| | location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
返回false；
}
}
});
});
您好，我已经按照您的图片设置了一个网格布局的

看看您是否可以将此代码带到这里，并将其用作一个良好的起点

如果使用下面的代码段视图或查看小提琴，则需要在完整视图中查看此内容。
它将以小屏幕大小堆叠


启动模板
身体{
填充顶部：50px；
背景色：深黄色；
}
.街区{
高度：300px；
利润率最高：2%；
}
.内块{
高度：280px；
边缘顶部：10px；
}     
.bg橙色{
背景颜色：橙色；
}
.空间{
利润率最高：2%；
利润底部：2%；
}
切换导航

    

  • 

  • 

  •
您好，我已经按照您的图片设置了一个网格布局的

看看您是否可以将此代码带到这里，并将其用作一个良好的起点

如果使用下面的snippet视图，则需要在完整视图中查看此内容