Bootstrap 4 – Đường viền – bootstrap 4 màu viền

Bootstrap 4 – Tiện ích Borders, Border cung cấp kiểu dáng, màu sắc và bán kính của đường viền của một phần tử.

Bạn đang xem : màu đường viền bootstrap 4

Bootstrap 4 – Đường viền

Quảng cáo

Mô tả

Tiện ích đường viền cung cấp kiểu, màu sắc và bán kính của đường viền phần tử.

Cộng và Trừ

Đường viền của phần tử có thể được thêm hoặc bớt bằng cách sử dụng các tiện ích cộng và trừ của đường viền như được hiển thị bên dưới –

Ví dụ

& lt; html lang = "vi" & gt;
   & lt; đầu & gt;
      & lt;! - Thẻ meta - & gt;
      & lt; meta charset = "utf-8" & gt;
      & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1, co-to-fit = no" & gt;
      & lt;! - Bootstrap CSS - & gt;
      & lt; liên kết rel = "bảng định kiểu"
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      & lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      & lt; title & gt; Bootstrap 4 Ví dụ & lt; / title & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; div class = "container" & gt;
         & lt; br & gt;
         & lt; div class = "text-white bg-Secondary" & gt;
            & lt; h2 & gt; Phụ gia & lt; / h2 & gt;
            & lt; span class = "border" & gt; border & lt; / span & gt;
            & lt; span class = "border-top" & gt; border-top & lt; / span & gt;
            & lt; span class = "border-right" & gt; border-right & lt; / span & gt;
            & lt; span class = "border-bottom" & gt; border-bottom & lt; / span & gt;
            & lt; span class = "border-left" & gt; border-left & lt; / span & gt;
            & lt; br & gt;
            & lt; br & gt;
         & lt; / div & gt;
         
         & lt; div class = "text-white bg-Secondary" & gt;
            & lt; h2 & gt; Trừ & lt; / h2 & gt;
            & lt; span class = "border border-0" & gt; border-0 & lt; / span & gt;
            & lt; span class = "border border-top-0" & gt; border-top-0 & lt; / span & gt;
            & lt; span class = "border border-right-0" & gt; border-right-0 & lt; / span & gt;
            & lt; span class = "border border-bottom-0" & gt; border-bottom-0 & lt; / span & gt;
            & lt; span class = "border border-left-0" & gt; border-left-0 & lt; / span & gt;
         & lt; / div & gt;
      & lt; / div & gt;
      
      & lt;! - jQuery trước, sau đó đến Popper.js, sau đó là Bootstrap JS - & gt;
      & lt; script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
         liêm chính = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkN"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
      & lt;! - Popper - & gt;
      & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         toàn vẹn = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
         crossorigin = "vô danh" & gt;
      
      & lt; / script & gt;
      & lt;! - JavaScript Bootstrap được biên dịch và rút gọn mới nhất - & gt;
      & lt; script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
         toàn vẹn = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYl"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
   & lt; / body & gt;
& lt; / html & gt;

Nó sẽ tạo ra kết quả sau –

Đầu ra

Màu đường viền

Bạn có thể đặt màu cho đường viền của phần tử bằng cách sử dụng màu chủ đề như được hiển thị trong ví dụ dưới đây –

Ví dụ

& lt; html lang = "vi" & gt;
   & lt; đầu & gt;
      & lt;! - Thẻ meta - & gt;
      & lt; meta charset = "utf-8" & gt;
      & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1, co-to-fit = no" & gt;
      
      & lt;! - Bootstrap CSS - & gt;
      & lt; liên kết rel = "bảng định kiểu"
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      & lt; script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      & lt; title & gt; Bootstrap 4 Ví dụ & lt; / title & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; div class = "container" & gt;
         & lt; h2 & gt; Màu Đường viền & lt; / h2 & gt;
         & lt; div class = "bordercolor" & gt;
            & lt; p & gt; border-primary, border-second, border-success & lt; / p & gt;
            & lt; span class = "" & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-primary" & gt;
            & lt; / span & gt;
            & lt; span class = "" & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-second" & gt;
            & lt; / span & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-thành công" & gt;
            & lt; / span & gt;
            & lt; br & gt;
            & lt; br & gt;
            
            & lt; p & gt; biên giới nguy hiểm, cảnh báo biên giới, thông tin biên giới & lt; / p & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "biên giới biên giới-nguy hiểm" & gt;
            & lt; / span & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-warning" & gt;
            & lt; / span & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-info" & gt;
            & lt; / span & gt;
            & lt; br & gt;
            & lt; br & gt;
            
            & lt; p & gt; viền sáng, viền tối, viền trắng & lt; / p & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-light" & gt;
            & lt; / span & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-dark" & gt;
            & lt; / span & gt;
            & lt; span & gt;
               & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
               alt = "..." class = "border border-white" & gt;
            & lt; / span & gt;
            & lt; br & gt;
         & lt; / div & gt;
      & lt; / div & gt;
      
      & lt;! - jQuery trước, sau đó đến Popper.js, sau đó là Bootstrap JS - & gt;
      & lt; script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
         liêm chính = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkN"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
      & lt;! - Popper - & gt;
      & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         toàn vẹn = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
      & lt;! - JavaScript Bootstrap được biên dịch và rút gọn mới nhất - & gt;
      & lt; script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
         toàn vẹn = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYl"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
   & lt; / body & gt;
& lt; / html & gt;

Nó sẽ tạo ra kết quả sau –

Xem Thêm  Đóng trong JavaScript - Giải thích với các ví dụ - đóng cửa trong tập lệnh java

Đầu ra

Bán kính đường viền

Bạn có thể thêm các góc tròn vào một phần tử bằng cách sử dụng các lớp (tròn trên cùng, tròn bên phải, v.v.) như được hiển thị trong ví dụ dưới đây –

Ví dụ

& lt; html lang = "vi" & gt;
   & lt; đầu & gt;
      & lt;! - Thẻ meta - & gt;
      & lt; meta charset = "utf-8" & gt;
      & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1, co-to-fit = no" & gt;
      
      & lt;! - Bootstrap CSS - & gt;
      & lt; liên kết rel = "bảng định kiểu"
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      & lt; title & gt; Bootstrap 4 Ví dụ & lt; / title & gt;
   & lt; / head & gt;
   
   & lt; body & gt;
      & lt; div class = "container-chất lỏng bg-thứ cấp" & gt;
         & lt; br & gt;
         & lt; h2 & gt; Bán kính Viền & lt; / h2 & gt;
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "làm tròn" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-top" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-right" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-bottom" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-left" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-circle" & gt;
         
         & lt; img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
            alt = "..." class = "round-0" & gt;
         & lt; br & gt;
         & lt; br & gt;
         & lt; br & gt;
      & lt; / div & gt;
      
      & lt;! - jQuery trước, sau đó đến Popper.js, sau đó là Bootstrap JS - & gt;
      & lt; script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
         liêm chính = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkN"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
      & lt;! - Popper - & gt;
      & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         toàn vẹn = "sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
      & lt;! - JavaScript Bootstrap được biên dịch và rút gọn mới nhất - & gt;
      & lt; script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
         toàn vẹn = "sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYl"
         crossorigin = "vô danh" & gt;
      & lt; / script & gt;
      
   & lt; / body & gt;
& lt; / html & gt;

Nó sẽ tạo ra kết quả sau –

Xem Thêm  30 hướng dẫn thiết kế giao diện người dùng / giao diện người dùng miễn phí tốt nhất (Cập nhật năm 2019) - ui ux hướng dẫn w3schools

Đầu ra

bootstrap4_utilities.htm

Quảng cáo


Xem thêm những thông tin liên quan đến chủ đề bootstrap 4 màu viền

Bootstrap 4 Basics Slider Carousel Call To Action Buttons

  • Tác giả: System 22 Web Design | Divi Theme Elementor WP
  • Ngày đăng: 2019-05-31
  • Đánh giá: 4 ⭐ ( 7956 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap 4 Basics Slider Carousel Call To Action Buttons. Bootstrap 4 is an awesome platform, it’s really fast loading and lightweight, if you are not creating a blog or e-commerce store I would recommend it over WordPress every time.

    Check out our “Bootstrap 4 Make Fast Responsive Cool Websites From Scratch” course: http://bit.ly/BS4full-course

    Bootstrap Basics Playlist: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

    Button Code: https://getbootstrap.com/docs/4.3/components/buttons/

    CSS Code Used:

    .btn-primary {
    background: e42448;
    border-color:transparent !important;
    color: fff !important;
    border-radius: 50px;
    padding: 10px 25px !important;
    width: 200px;
    text-align: center;
    margin:10px 15px;
    }

    .btn-primary:hover {
    background: 731397;
    }

    .btn-success {
    background: 181174;
    border-color:transparent !important;
    color: fff !important;
    border-radius: 50px;
    padding: 10px 25px !important;
    width: 200px;
    text-align: center;
    margin:10px 15px;
    }

    .btn-success:hover {
    background: 731397;
    }

    .btn-danger {
    background: 731397;
    border-color:transparent !important;
    color: fff !important;
    border-radius: 50px;
    padding: 10px 25px !important;
    width: 200px;
    text-align: center;
    margin:10px 15px;
    }

    .btn-danger:hover {
    background: e42448;
    }

    .frt {
    float:right;
    }

    Free Tech Courses – Web Design, game development, javascript, wordpress, bootstrap: https://bestwebdevelopmentcourses.com/free/

    Get our Build an awesome pro eCommerce store for free with WordPress course. https://goo.gl/fQDRMP

    Get our complete WordPress local install and migration course here : https://goo.gl/MsW8B3

    Get Our Full Bootstrap Website Building Course – Learn to build sites fast: https://goo.gl/6tzUxH

    Subscribe to our Channel https://goo.gl/Vn3Qu2

    More tips at :http://web-design-and-tech-tips.com/

    Facebook:https://www.facebook.com/system22.net/

    Get us to build Your website: http://www.system22.net/web-design.html

    -~-~~-~~~-~~-~-
    Please watch: “Divi 4 Theme Builder Custom Footer With Vertical Menu”
    https://www.youtube.com/watch?v=y1kwM7ep7lA
    -~-~~-~~~-~~-~-

Màu sắc trong Bootstrap 4

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 6646 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ giới thiệu về Màu sắc trong Bootstrap 4, một số lớp mặc định hay dùng và cách sử dụng chúng trong framework này.

Tiện ích (Utilities) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 5 ⭐ ( 9628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap 4 có rất nhiều lớp tiện ích (Utilities), trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào. Trong bài học này chúng ta sẽ lần lượt nghiên cứu các lớp tiện ích trong Bootstrap 4 đó nhé các bạn.

Tùy chỉnh và tải về Bootstrap

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 3 ⭐ ( 9858 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trường tùy chỉnh html, các tùy biến bootstrap giúp tạo nên sự trực quan cho trang web

Sử dụng Util trong Bootstrap

  • Tác giả: levunguyen.com
  • Đánh giá: 4 ⭐ ( 1400 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những chia sẻ dưới đây sẽ giúp các bạn hiểu được Util trong lập trình web với Bootstrap 4 là gì? Sau đó sẽ hướng dẫn cách thao tác với Util trong Bootstrap 4 bao gồm Cách tạo và thêm màu sắc border, tạo border có góc viền tròn cho các thành phần web. Đồng thời tìm hiểu cách sử dụng tính năng Float, cách để canh giữa trong Bootstrap cũng như cách như thế nào để thiết lập độ rộng, độ cao của các phần tử trong Bootstrap. Cùng với đó là những hướng dẫn cách tạo hiệu ứng bóng đổ, Iframe Responsive, Positive Vị trí, Close Icon và những bước để ẩn hiển thị một thành phần web bất kì nào đó.

Màu sắc trong Bootstrap 4

  • Tác giả: nq.com.vn
  • Đánh giá: 4 ⭐ ( 3847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

nút bootstrap hiển thị đường viền màu xanh khi nhấp vào

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Có thể tài sản của bạn đang bị ghi đè. Hãy thử đính kèm !importantmã của…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  JavaScript Mở Tab mới: Các kỹ thuật hiệu quả nhất là gì? - mở tab mới javascript