Hướng dẫn can we use bootstrap in python? - chúng ta có thể sử dụng bootstrap trong python không?

Question

Mặc dù tự dán nhãn cho mình là một nhà phát triển phụ trợ, nhưng tôi đã tham gia nhiều hơn và nhiều hơn với thiết kế phía trước, cụ thể là vì JavaScript đã làm mờ các đường giữa hai. Trong dự án cuối cùng của tôi, tôi đã hack một chút với HTML và CSS để phát triển các phong cách đáp ứng - có thể là một nỗi đau.

Nội dung chính Show

Tạo bố cục trang web tối thiểu
Hệ thống lưới điện
Một ví dụ: Bootstrap tiếp thị hẹp 3
Biến nó thành của riêng bạn
Bạn có thể sử dụng bootstrap với python không?
Làm thế nào để bạn sử dụng bootstrapping trong Python?
Tôi có thể sử dụng bootstrap trong django không?
Làm thế nào để bạn tạo một mẫu bootstrap trong Python?

Rất may, các khung như Bootstrap (trước đây gọi là Twitter Bootstrap) thực hiện các yêu cầu thiết kế như vậy khá đơn giản và thậm chí đơn giản hơn với việc phát hành Bootstrap 3 mới.

Hãy để một cái nhìn.

Đây là một loạt 3 phần. Trong phần đầu tiên, chúng tôi sẽ chỉ nhìn vào Bootstrap 3 và cách tùy chỉnh nó bằng HTML và CSS. Trong phần thứ hai, chúng tôi sẽ xem xét cách thiết lập một trang đích bán hàng hiệu quả. Kiểm tra nó ở đây. Cuối cùng, trong phần cuối cùng, chúng tôi sẽ thêm Python vào hỗn hợp để xây dựng một trang đích bằng Flask + Bootstrap 3.

Bạn có thể lấy các kiểu/trang cuối cùng từ repo này.

Tạo bố cục trang web tối thiểu

Bắt đầu bằng cách tải xuống Bootstrap từ trang web chính thức. Giải nén zip và lấy thư mục dist. Đây sẽ là thư mục gốc của chúng tôi cho dự án nhỏ này. Hãy chắc chắn thêm


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

1 từ


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

2 vào


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

3.

.
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
├── index.html
└── js
    ├── bootstrap.js
    ├── bootstrap.min.js
    └── jquery.js

Thêm tệp index.html với nội dung sau:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

Thêm một thanh điều hướng (hiện luôn luôn phản hồi), một container, jumbotron, một số văn bản ipsum và một nút:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

Thêm phong cách sau vào đầu:

<style>
  body {padding-top: 50px;}
style>

Cuối cùng, để thêm khả năng đáp ứng đầy đủ, hãy thêm các tập lệnh sau ngay trước thẻ


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

4:

<script src="js/jquery.js">script>
<script src="js/bootstrap.min.js">script>

Thoạt nhìn, bạn có thể thấy rằng tất cả các thành phần đều phẳng. Và nếu bạn không phải là một fan hâm mộ của thiết kế phẳng thì có một chủ đề thay thế. Chơi xung quanh với khả năng đáp ứng bằng cách thay đổi kích thước trình duyệt của bạn. Trông khá tốt. Khả năng đáp ứng bây giờ là mặc định trong Bootstrap 3 - vì vậy bây giờ bạn không có sự lựa chọn: Bạn phải phát triển cho thiết bị di động trước.

Hệ thống lưới điện

Hệ thống lưới bây giờ dễ sử dụng hơn nhiều. Nó có tỷ lệ lên đến 12 cột theo mặc định, có thể được thay đổi cho bốn thiết bị trên máy tính để bàn, máy tính để bàn, máy tính bảng và điện thoại. Nó cũng chất lỏng theo mặc định như bạn sẽ sớm thấy.

Thêm một hàng, một hệ thống lưới cơ bản và nhiều văn bản ipsum sau khi kết thúc jumbotron div:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.p>
    div>
    <div class="col-md-4">
      <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.p>
    div>
    <div class="col-md-4">
      <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.p>
    div>
  div>
div>

Vì mỗi hàng có 12 đơn vị, chúng tôi đã tạo ba cột là 4 đơn vị mỗi đơn vị. Chỉ cần nhớ rằng tất cả các cột phải thêm tối đa 12. Thử nghiệm một chút: Hãy thử thay đổi cột đầu tiên thành 2 đơn vị và cột cuối cùng thành 8 đơn vị hoặc thêm một hàng mới với một bộ cột khác (hoặc chỉ đợi cho đến bước tiếp theo ).

Thêm một hàng mới bên dưới hàng cũ với lưới sau (đảm bảo nó đi vào bên trong phần tử


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

5):

<div class="col-md-8 col-md-offset-2">
  <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.p>
div>

Ở đây, chúng tôi đã sử dụng


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

6, chuyển cột sang phải để tập trung nó. Về cơ bản, chúng tôi đã thay đổi hơn 2 đơn vị, sau đó sử dụng cột 8 đơn vị, để lại 2 đơn vị khác sau, bằng 12: 2 + 8 + 2 = 12.

Vì hệ thống lưới trong Bootstrap 3 đáp ứng, bạn có thể tổ một hàng trong một hàng khác (một tính năng mới khác). Hàng bên trong - ví dụ: hàng trong một hàng - sẽ có 12 cột. Nó có thể giúp rút ra điều này. Hãy tự mình thử điều này trước khi nhìn vào ví dụ của tôi.

<div class="row">
  <div class="col-md-4">
    <div class="row">
      <div class="col-md-6">
        <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic.p>
      div>
      <div class="col-md-6">
        <p>Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan.p>
      div>
    div>
    <div class="row">
      <div class="col-md-6">
        <p>Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park.p>
      div>

      <div class="col-md-6">
        <p>Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo.p>
      div>
    div>
  div>
  <div class="col-md-4">
    <p>Yr umami selfies Carles DIY, pop-up Tonx meggings stumptown freegan street art Vice ethnic. Pickled gastropub lo-fi polaroid, ennui selvage meh Tumblr organic iPhone kale chips narwhal Echo Park. Tonx literally distillery Pitchfork McSweeney's semiotics. Stumptown YOLO fanny pack bespoke, kitsch Carles gastropub vegan. Biodiesel ennui church-key McSweeney's, selvage hoodie Brooklyn 90's lomo. Quinoa photo booth cliche semiotics. Roof party Etsy ethnic, fashion axe mlkshk 8-bit paleo.p>
  div>
  <div class="col-md-4">
    <p>
      <ul class="list-group">
        <li class="list-group-item"><span class="badge">14span>Quinoa photo boothli>
        <li class="list-group-item"><span class="badge">10span>iPhone kale chipsli>
        <li class="list-group-item"><span class="badge">6span>fanny pack bespokeli>
        <li class="list-group-item"><span class="badge">4span>lo-fi polaroidli>
        <li class="list-group-item"><span class="badge">2span>Tonx meggings stumptownli>
      ul>
    p>
  div>
div>

Vì vậy, chúng tôi đã lấy cột đầu tiên, với khoảng 4, và lồng nó để nó có bốn hộp có kích thước bằng nhau. Ngoài ra, bạn có thể nhận thấy danh sách trong cột xa bên phải. Đây là một tính năng mới khác trong Bootstrap 3, được gọi là các nhóm danh sách.

Bạn cũng có thể thay thế danh sách chưa được đặt hàng bằng


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

7 và sau đó sử dụng các thẻ neo để hiển thị liên kết thay vì các mục danh sách:

<div class="list-group">
  <a href="#" class="list-group-item"><span class="badge">14span>Quinoa photo bootha>
  <a href="#" class="list-group-item"><span class="badge">10span>iPhone kale chipsa>
  <a href="#" class="list-group-item active"><span class="badge">6span>fanny pack bespokea>
  <a href="#" class="list-group-item"><span class="badge">4span>lo-fi polaroida>
  <a href="#" class="list-group-item"><span class="badge">2span>Tonx meggings stumptowna>
div>

Kiểm tra điều đó. Có một số niềm vui với nó. Hãy thử đùa với màu nền của Jumbotron bằng cách thêm hình ảnh, độ dốc hoặc thậm chí là màu cơ bản:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

8.

Những thay đổi nhỏ như vậy có thể tạo ra một sự khác biệt lớn. Hãy chắc chắn rằng trang của bạn trông giống như của tôi.

Một ví dụ: Bootstrap tiếp thị hẹp 3

Hãy để Lôi thực hiện điều này một bước xa hơn và tạo ra một ví dụ làm việc. Một trong những ví dụ yêu thích của tôi từ Bootstrap 2 là mẫu tiếp thị hẹp, thật đáng buồn, là một phần của các ví dụ có trong Bootstrap 3. Vì vậy, hãy để tự tạo nó từ đầu.

Bắt đầu với một trang cơ bản.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <style>
    body {padding-top: 50px;}
  style>
  <body>

  <div class="container">

     <h2>Nothing to see .. yet.<h2>

  div>

  <script src="js/jquery.js">script>
  <script src="js/bootstrap.min.js">script>
  body>
html>

Thêm thanh NAV và cập nhật các kiểu:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

0

Jumbotron. Thêm các kiểu đầu tiên, sau đó thêm jumbotron bên dưới


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

9.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

1

Phần tiếp thị. Một lần nữa, thêm các kiểu trước, sau đó xóa phần tử

<style>
  body {padding-top: 50px;}
style>

0 và thêm vào hàng tiếp thị.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

2

Chân trang. Lưu ý thêm

<style>
  body {padding-top: 50px;}
style>

1. Điều này sẽ đóng

<style>
  body {padding-top: 50px;}
style>

2.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

3

Đó là nó. So sánh phiên bản này với phiên bản Bootstrap 2. Tương tự. Nhưng bằng phẳng.

Hướng dẫn can we use bootstrap in python? - chúng ta có thể sử dụng bootstrap trong python không?

Biến nó thành của riêng bạn

Hãy cùng xem xét một số cách nhanh chóng mà bạn có thể tùy chỉnh ví dụ này để làm cho nó trông ít hơn nữa.

Đầu tiên, thêm một bảng kiểu mới có tên

<style>
  body {padding-top: 50px;}
style>

3 và thêm các kiểu nhúng vào nó. Don Tiết quên thêm các kiểu dáng mới vào

<style>
  body {padding-top: 50px;}
style>

4, ngay bên dưới bảng kiểu đầu tiên. Ngoài ra, thêm các phông chữ Google sau cũng như liên kết đến Phong cách tuyệt vời của phông chữ:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

4

Hãy để Lừa đặt những phông chữ mới đó để sử dụng:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

5

Như bạn có thể nói, thật khó để tìm thấy hai phông chữ trông đẹp với nhau. May mắn thay, có rất nhiều tài nguyên tốt - như ở đây và ở đây.

Kết cấu có thể tạo ra một sự khác biệt lớn, đó là lý do tại sao tôi yêu các mẫu tinh tế. Cập nhật lớp

<style>
  body {padding-top: 50px;}
style>

5 với mã sau. Hãy chắc chắn để làm cho Jumbotron trong suốt là tốt.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

6

Cập nhật phần tiếp thị để chỉ có một hàng với ba cột (mỗi lớp 4 đơn vị). Hãy cùng đưa các glyphicons mới sử dụng. Hoặc bạn có thể sử dụng phông chữ tuyệt vời vì chúng tôi đã thêm bảng kiểu.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

7

Trên phần tiếp thị, hãy để thêm một hàng mới với hai video, hy vọng có liên quan đến sản phẩm hoặc dịch vụ của bạn (hoặc ít nhất là giải thích lý do tại sao trang web của bạn tồn tại).


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

8

Nhân tiện, tôi đã ghi lại những video đó vài tháng trước, chi tiết về cách bắt đầu với một dự án Django. Kiểm tra chúng, tạo một dự án cơ bản, và sau đó thêm một số kiểu. :)

Cập nhật Jumbotron với một số nút chia sẻ xã hội và một vài biểu tượng nữa.


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class ="container">
      <h2>Hello, world!h2>
    div>
  body>
html>

9

Cuối cùng, xóa lớp

<style>
  body {padding-top: 50px;}
style>

6 khỏi thanh điều hướng và thêm một biểu tượng nữa:


<html>
  <head>
    <title>Bootstrap Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    
    
  head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar">span>
          <span class="icon-bar">span>
          <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Bootstrap <3a>
      div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Homea>li>
          <li><a href="#about">Abouta>li>
          <li><a href="#contact">Contacta>li>
        ul>
      div>
    div>
  div>

  <div class="jumbotron">
    <div class="container">
      <h2>Bootstrap starter templateh2>
      <p class="lead">Bacon ipsum dolor sit amet tenderloin chuck jowl, drumstick pork loin kevin andouille tri-tip. Turkey biltong sirloin, tongue rump pork belly t-bone tail sausage venison corned beef. Jerky pig shoulder beef, tri-tip turducken kevin ribeye prosciutto spare ribs.p>
      <a class="btn btn-primary btn-lg btn-block">Big ASS Learn more buttona>
    div>
  div>

  body>
html>

0

Và ở đây, phiên bản cuối cùng.

Tốt? Ít nhất, với những thay đổi cơ bản này, mất năm phút, bạn hiện đang tiến hành tốt để thực hiện một chủ đề chung và làm cho nó trở nên chuyên nghiệp hơn một chút. Chúc mừng.

Sẵn sàng để biết thêm? Xem phần thứ hai trong loạt ba phần này. Oh - và kiểm tra các mẫu khởi động này để bắt đầu nhanh chóng. Chỉ cần thêm phông chữ mới, màu sắc và một vài kết cấu

Bạn có thể sử dụng bootstrap với python không?

Các thành phần Bootstrap cho Python có thể dễ dàng cài đặt với PIP hoặc Conda. Sau khi được cài đặt, chỉ cần liên kết bảng kiểu bootstrap và bắt đầu sử dụng các thành phần giống hệt như bạn sẽ sử dụng các thư viện thành phần Dash khác. . Once installed, just link a Bootstrap stylesheet and start using the components exactly like you would use other Dash component libraries.

Làm thế nào để bạn sử dụng bootstrapping trong Python?

Làm thế nào để thực hiện lấy mẫu bootstrap trong Python ?..

Nhập các mô -đun cần thiết.Các mô -đun chúng ta cần là: Numpy.....

Tạo dữ liệu ngẫu nhiên.Hãy tạo phân phối bình thường với giá trị trung bình 300 và với 1000 mục.....

Sử dụng lấy mẫu bootstrap để ước tính giá trị trung bình.Hãy tạo 50 mẫu có kích thước 4 mỗi mẫu để ước tính giá trị trung bình ..

Tôi có thể sử dụng bootstrap trong django không?

Nó rất dễ sử dụng bootstrap trong django.Vì Bootstrap là một khung phía trước, nó hoàn toàn bao gồm các tệp CSS & JavaScript.Các tập tin này được coi là tĩnh ở phía máy chủ.. Since Bootstrap is a front-end framework, it completely consists of CSS & JavaScript files. These files are considered static on the server-side.

Làm thế nào để bạn tạo một mẫu bootstrap trong Python?

Quy trình cơ bản cho bootstrapping như sau: lấy các mẫu lặp lại với thay thế từ một bộ dữ liệu nhất định.Đối với mỗi mẫu, hãy tính toán thống kê mà bạn quan tâm. Điều này dẫn đến k ước tính khác nhau cho một thống kê nhất định, sau đó bạn có thể sử dụng để tính khoảng tin cậy cho thống kê.

programming python What is Bootstrap Bootstrap 4 Python Install bootstrap Python Python Bootstrap 5

Hướng dẫn can we use bootstrap in python? - chúng ta có thể sử dụng bootstrap trong python không?

Tạo bố cục trang web tối thiểu

Hệ thống lưới điện

Một ví dụ: Bootstrap tiếp thị hẹp 3

Biến nó thành của riêng bạn

Bạn có thể sử dụng bootstrap với python không?

Làm thế nào để bạn sử dụng bootstrapping trong Python?

Tôi có thể sử dụng bootstrap trong django không?

Làm thế nào để bạn tạo một mẫu bootstrap trong Python?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội